Monday, March 4, 2013

Coding a Horizontal Navigation Bar with jQuery Dropdown Menus


It is very common to find dropdown navigation elements within website layouts. Developers use these types of hidden menus for displaying extra links which are typically related to the main topic. Other examples may use sliding panels or varying accordion-style menus to accomplish the same interface.

But for this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.

preview demo jquery animated dropdown navigation bar navbar

Live DemoDownload Source Code

First we need to create the basic HTML5 template which is used in most of my tutorials. We need the latest version of jQuery hosted from Google’s web API. Also I have added my own stylesheet named styles.css which we can go over quickly.

lt;!doctype html> Horizontal Dropdown Navigation Bar Demo

Now the real meat of our content is handled by an unordered list at the top of the page. I have wrapped all the list items inside an HTML5

0 comments:

Post a Comment