Create a Drop-Down list using JavaScript and CSS

Translate this page

Step by step instructions on how to make a simple drop down navigational list for your wiki without the use of skins strictly using javascript and css coding.

Requirements

Ability to change your MediaWiki:Common.js and MediaWiki:Monobook.css

Common.js Code

/* 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: 3px;
  padding: 2px;
  list-style-type: none;
  border: none;
  background: #fff;
  width: auto;
}

/*Drop Menu Line Colors that "flash" to load Menu*/
ul#nav li ul {
  background: #fff;
  margin: 0px;
  padding: 5px;
  width: auto;
}

ul#nav li {
  position: relative;
  margin: 5px;
  width: auto;
  padding: 5px;
  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: 2px;
  padding: 2px;
  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;
}

Code / Menu / Listing Used in Wiki Example

<ul id="nav">
  <li><span class="plainlinks">'''[[PageLinkLocated|NameofLink]]'''</span>
    <ul>
      <li><span class="plainlinks">'''[[Option1]]'''</span></li>
      <li><span class="plainlinks">'''[[Option2]]'''</span></li>
      <li><span class="plainlinks">'''[[Option3]]'''</span></li>
      <li><span class="plainlinks">'''[[Option4]]'''</span></li>
      <li><span class="plainlinks">'''[[Option5]]'''</span></li>
    </ul>
  </li>
</ul>

Thus creating a fully functional drop down list in your specified location.

Sample Code:

<ul id="nav">
  <li><span class="plainlinks">'''[[Main_Page|Shortcuts]]'''</span>
    <ul>
      <li><span class="plainlinks">'''[[Carnivores]]'''</span></li>
      <li><span class="plainlinks">'''[[Herbivores]]'''</span></li>
      <li><span class="plainlinks">'''[[Reptiles]]'''</span></li>
      <li><span class="plainlinks">'''[[Amphibians]]'''</span></li>
      <li><span class="plainlinks">'''[[Mammals]]'''</span></li>
    </ul>
  </li>
</ul>

References

YADM	http://www.onlinetools.org/tools/yadm/
WikiMedia Forums Support	http://www.mwusers.com/forums
CSS Coding School Support	http://www.w3schools.com/Css/default.asp

Step by step instructions on how to make a simple drop down navigational list for your wiki without the use of skins strictly using javascript and css coding.

Requirements

Common.js Code

Monobook.css

Code / Menu / Listing Used in Wiki Example

References

See also