Collection of Tips for Creating/Controlling Dropdown on Web Page
In my job, I always counter problem of creating dropdowns for web development project. Sometimes I can use Bootstrap, jQuery. Sometimes I have to use pure JavaScript. I also need to perform control options to dropdowns ocationally.
I want to write this post to record all ways and tips for creating dropdown, for future reference.
Pure JavaScript
Simpliest Dropdown Option
The simplest dropdown is just created by <select>
and <option>
tag. Usually you wrap a few <option>
blocks in a <select>
block.
For each <option>
, You can assign value
attribute to it. There are other attributes such as selected
or label
.
For <select>
, you can also set attributes such as size
or name
.
autofocus
,form
andrequired
are attributes for HTML5. Please check browser support setting before use them.
Example from W3Schools:
<select> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select>
Dropdown Menu (One or Multiple Level)
I found this post and this post from JavaScript Array website are very classical. I've tested them and I highly recommend using them for pure dropdown menu.
Single Level
I have read through the code. Here are my explanations. You are free to add font or hover effects in real world.
HTML Structure:
<!--Container of Many First Level Menus--> <ul> <li> <!--First Level Menu 1 --> <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">First Level Menu 1</a> <!--Links of First Level Menu 1 --> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href='#'>Link1</a> <a href='#'>Link1</a> </div> </li> <li> <!--First Level Menu 2 --> <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">First Level Menu 2</a> <!--Links of First Level Menu 2 --> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href='#'>Link2</a> <a href='#'>Link2</a> </div> </li> </ul>
CSS Structure (You may need to some tags to id in real world):
/* Outside Container */ ul { margin: 0; padding: 0; z-index: 30 } ul li { margin: 0; padding: 0; list-style: none; float: left; } /* First Leval Menu */ ul li a { display: block; margin: 0 1px 0 0; /* adjust as you need */ padding: 4px 10px; /* adjust as you need */ width: 60px; text-align: center; text-decoration: none; } ul li a:hover { } ul div { position: absolute; visibility: hidden; margin: 0; padding: 0; } ul div a { position: relative; display: block; margin: 0; padding: 5px 10px; /* adjust as you need */ width: auto; white-space: nowrap; /* Specify that the text in <p> elements will never wrap */ text-align: left; /* adjust as you need */ text-decoration: none; } ul div a:hover { }
JavaScript Structure:
// Copyright 2006-2007 javascript-array.com var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose;
Mutiple Level
With jQuery
update coming soon...
With Bootstrap3 and jQuery
update coming soon...