Create a Drop-Down list using JavaScript and CSS/ja

必要条件
MediaWiki:Common.jsやMediaWiki:Monobook.cssを書き換える能力

Common.js のコード
/* Any JavaScript here will be loaded for all users on every page load. */

function ddm {

// Variables, change these in case you need to set other class names (mmhide_ for    // contribute users for example) var parentClass = 'isParent'; //gets applied when the LI has a nested UL   var activeParentClass = 'isActive'; //gets applied when the nested UL is visible var preventHoverClass = 'nohover'; //denotes a navigation that should not get any hover effects var indicateJSClass = 'dhtml'; //gets applied to the main navigation when JavaScript is available var toHideClass = 'hiddenChild'; //gets applied to hide the nested UL   var toShowClass = 'shownChild'; //gets applied to show the nested UL    var currentClass = 'current'; //denotes the current active sub element and prevents collapsing var d = document.getElementById('nav'); //denotes the navigation element

// if DOM is not available stop right here. if (!document.getElementById && !document.createTextNode) { return; }

// if the navigation element is available, apply the class denoting DHTML capabilities if (d) { d.className += d.className == '' ? indicateJSClass : ' ' + indicateJSClass; var lis, i, firstUL, j, apply;

// loop through all LIs and check which ones have a nested UL       lis = d.getElementsByTagName('li'); for (i = 0; i < lis.length; i++) { firstUL = lis[i].getElementsByTagName('ul')[0]; // if there is a nested UL, deactivate the first nested link and apply the class to show // there is a nested list if (firstUL) { lis[i].childNodes[0].onclick = function { return false; };               lis[i].className += lis[i].className == '' ? parentClass : ' ' + parentClass; // check if there is a "current" element apply = true; if (new RegExp('\\b' + currentClass + '\\b').test(lis[i].className)) { apply = false; }               if (apply) { for (j = 0; j < firstUL.getElementsByTagName('li').length; j++) { if (new RegExp('\\b' + currentClass + '\\b').test(firstUL.getElementsByTagName('li')[j].className)) { apply = false; break; }                   }                }                // if there is no current element, apply the class to hide the nested list if (apply) { firstUL.className += firstUL.className == '' ? toHideClass : ' ' + toHideClass; // check if there is a class to prevent hover effects and only apply the function // onclick if that is the case, otherwise apply it onclick and onhover if (new RegExp('\\b' + preventHoverClass + '\\b').test(d.className)) { lis[i].onclick = function { doddm(this); };                   } else { lis[i].onclick = function { doddm(this); };                       lis[i].onmouseover = function { doddm(this); };                       lis[i].onmouseout = function { doddm(null); };                   }                    // if there is a current element, define the list as being kept open and apply the // classes to show the nested list and define the parent LI as an active one } else { lis[i].keepopen = 1; firstUL.className += firstUL.className == '' ? toShowClass : ' ' + toShowClass; lis[i].className = lis[i].className.replace(parentClass, activeParentClass); }           }        }    }    // function to show and hide the nested lists and add the classes to the parent LIs function doddm(o) { var childUL, isobj, swap;

// loop through all LIs of the navigation lis = d.getElementsByTagName('li'); for (i = 0; i < lis.length; i++) { isobj = lis[i] == o;           // function to exchange class names in an object swap = function(tmpobj, tmporg, tmprep) { tmpobj.className = tmpobj.className.replace(tmporg, tmprep); };           // if the current LI does not have an indicator to be kept visible if (!lis[i].keepopen) { childUL = lis[i].getElementsByTagName('ul')[0]; // check if there is a nested UL and if the current LI is not the one clicked on               // and exchange the classes accordingly (ie. hide all other nested lists and                 // make the LIs parent rather than active.                if (childUL) {                    if (new RegExp('\\b' + preventHoverClass + '\\b').test(d.className)) {                        if (new RegExp('\\b' + activeParentClass + '\\b').test(lis[i].className)) {                            swap(childUL, isobj ? toShowClass : toHideClass, isobj ? toHideClass : toShowClass);                           swap(lis[i], isobj ? activeParentClass : parentClass, isobj ? parentClass : activeParentClass);                       } else {

swap(childUL, isobj ? toHideClass : toShowClass, isobj ? toShowClass : toHideClass); swap(lis[i], isobj ? parentClass : activeParentClass, isobj ? activeParentClass : parentClass); }                   } else { swap(childUL, isobj ? toHideClass : toShowClass, isobj ? toShowClass : toHideClass); swap(lis[i], isobj ? parentClass : activeParentClass, isobj ? activeParentClass : parentClass); }               }            }        }    } } window.onload = function { ddm; // add other functions to be called onload below };

Monobook.css
/*Main Line Not Just Link Margin - From left Side*/ ul#nav{ margin:3; padding:2; list-style-type:none; border:none; background:#fff; padding:.5em; width:auto; } /*Drop Menu Line Colors that "flash" to load Menu*/ ul#nav li ul{ background:#fff; margin:0; padding:5; width:auto; } ul#nav li{ position:relative; margin:5; width:auto; padding:5; list-style-type:none; background:333; color:#333; line-height:150%; } /*Main Link Font Color and "loading border" set to fff for invisibility*/ ul#nav a{ border:1px solid #fff; color:#333; text-decoration:none; display:block; } /*Mouse over option text color*/ ul#nav a:hover{ border:1px inset #333; background:#333; color:#333; } /*Color of Text option drop down without mouse on them.*/ ul#nav li li a{ padding-left:1em; color:#006AFF; text-decoration:none; display:block; } ul#nav li li a:hover{ background:#cef; }

/* DDM relative dropdown example */ .hiddenChild{ position: absolute; left: -999em; } .shownChild{ left:-1px; } p{ clear:both;float:none; } /*Parent initial border information white fff set to hide "optional options area"*/ ul#nav.dhtml{ list-style-image: none; display: block; position:relative; width:auto; border:2px solid #fff; background:#333 margin:2; padding:2; list-style-type:none; height:1.5em; } /*WIDTH IS TOP OPTION WIDTH. (OPTION WIDTH - 1)*/ ul#nav.dhtml li{ position:relative; float:left; width:9em; border-right:1px solid #333; border-top:1px solid #333; border-left:1px solid #333; border-bottom:1px solid #333; } /*Initial background color of options with mouse hovered over main link*/ ul#nav.dhtml ul{ list-style-image: none; display: block; top:1.5em; position:absolute; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333; background:#333; width:auto; z-index:10; } ul#nav.dhtml li a,ul#nav.dhtml li a:hover{ border:none; background:#333; } ul#nav.dhtml li a{ padding:0 .5em; background:#333; } /*Options background color when main category is highlighted with mouse and options not selected WIDTH IS OPTIONS WIDTH*/ ul#nav.dhtml ul li{ border:none; width:9em; background:#fff; } /*No Mouse On Main Link Background*/ ul#nav.dhtml li.isParent{ background:#cef; } /*Yes Mouse On Main Link Background*/ ul#nav.dhtml li.isActive{ background:#fff; } ul#nav.dhtml li.isActive a{ background:cef; } ul#nav.dhtml li.isActive ul a{ padding:0 .5em; } ul#nav.dhtml a:hover{ background:#333; } ul#nav.dhtml li.isParent a:hover{ background:#333; } ul#nav.dhtml li.isActive ul a:hover{ background:#333; }

ウィキのサンプルで用いるコード、メニュー、リスト
 NameofLink  Option1  Option2  Option3  Option4  Option5 

こうして指定の場所にきちんと機能するドロップダウンリストを作成.

サンプル コード:

 Shortcuts  Carnivores </li> Herbivores </li> Reptiles </li> Amphibians </li> Mammals </li></ul></li></ul></ul>

関連項目

 * OOjs_UI/Widgets/Selects_and_Options