How To Make JavaScript Drop Down Menus

How To Make JavaScript Drop Down Menus
Page content

Why JavaScript?

JavaScript is quite useful to web designers as it helps them create visually appealing pages with a touch of life within them. With JavaScript you can have beautiful transitions in your code and even use it to hide additional elements of your page that are important yet do not need to be visible all the time because of clutter and over crowding or for any other reason that may arise. One of the things web designers want to stay hidden until the reader needs them is extensive drop down menus, and the solution is to use JavaScript drop down menus.

Creating the Menu

Creating a JavaScript drop down menu involves a mix of CSS styling and dynamic JavaScript code to show, hide and position the menu items. To fill in the actual menu items, you would need to have them created using HTML unordered lists as shown below.

The classes in the code above are used to add additional styling to the code, which would look something similar to this code below.

.nav{height:45px;width:986px;margin: 0px auto;margin-bottom: 10px;background:#efefef;}

.nav ul{list-style-type: none; list-style-image: none; margin: 1px 0px; padding: 0; display: inline-block; float: left;}

.nav ul li{float: left; display: inline; margin: 1px 0; padding: 0;}

.nav ul li a{text-decoration:none;display: block; float: left; font:bolder 11px tahoma, Geneva, Arial, sans-serif;padding: 12px 22px 15px 22px; border-right: 1px solid #cccccc; border-left: 1px solid #efefef;text-transform:uppercase;color:#000000;}

.nav ul li a:hover{color:#afafaf;background:#cccccc;}

.nav ul li #first{border-left:none;}

.navdrop{position: absolute;left: 0;top: 0;visibility: hidden;border: 1px solid #afafaf;border-bottom-width: 0;line-height: 35px;z-index: 100;width: 200px;}

.navdrop ul{margin: 0;padding: 0;list-style-type: none;}

.navdrop ul li a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid #afafaf;

border-top: 1px solid #ffffff;padding: 5px 0 5px 0;text-decoration: none;font:bolder 11px tahoma, Geneva, Arial, sans-serif;

color:#000000;text-indent: 5px;text-transform:uppercase;background: #efefef;}

.navdrop a:hover{background:#cccccc;color:#afafaf;}

.navdrophadow{position: absolute;left: 0;top: 0;z-index: 99;background: black;visibility: hidden;}

.selectedanchor{ background:#cccccc;}

Before implementing your drop down menu, you will need to instantiate the JavaScript code by running this code by placing anywhere before the actual drop down menu.

Once you have everything styled according to the way you prefer using the samples above as templates, you would then need to include the JavaScript code which makes everything functional. This is the syntax for including the JavaScript code in the HTML header where you want the JavaScript drop down menu to appear.

You can download the actual JavaScript drop down menu script file at https://blog.sobbayi.com/goodies/id=jscssmenu. The JavaScript code in general handles positioning, additional styling, such as shadow effects, visibility and animation of the drop down menus.

Conclusion

If you think you possess the skills to implement your own JavaScript code, keep in mind that drop down menus can be quite complex as seen in the JavaScript file linked to above. If you keep things simple as shown in this tutorial then you are bound to get a functioning JavaScript drop down menu without the hassle involved in developing one from scratch.