Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

jQuery + CSS + HTML5: Creating a Dropdown Menu

In this article we will see how we can create a multi-level dropdown menu with the help of CSS3 and jQuery.

We all are aware that the CSS3-only menu is cross browser tested. Except for IE6, it works fine in all the browsers. IE is required to have the addition of the jQuery function to work properly.

Let us initiate to create our own menu:

We need to start with the XHTML Structure of the would-be majestic menu we are going to create for which we will make use of a nested list, top level list id is “nav”:

Listing 1: Creating the menu using a nested list “nav”

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Basic jQuery</a></li>
                    <li><a href="#">3.1.2 Advanced jQuery</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

That’s all for the HTML part and with no CSS3 styling, the menu will appear as below:

  • 1 HTML
  • 2 CSS
  • 3 Javascript
  • 3.1 jQuery
  • 3.1.1 Basic jQuery
  • 3.1.2 Advanced jQuery
  • 3.2 Mootools
  • 3.3 Prototype

Here goes the stylesheet part:

Listing 2: Displays the stylish portion

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }

This would remove the indents browsers tend to make, and also the bullets from #nav as well as it are all its child-ul elements. The “position:relative” is required for the reason that we will arrange some of the contained elements with position:relative and absolute which is necessary since relative and absolute positioned elements are positioned based on their containing blocks with a position attribute, other than static.

Line-height is used to define the height of each list item and one could set the height attribute for the list-items so as to define their height. However the line-height will center the link text vertically with so as to play with margins and paddings.

Listing 3: Code styling each hyperlink in the menu

#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}

The above code will style each hyper link in our menu as displayed below:

1 HTML
2 CSS
3 Javascript
3.1 jQuery
3.1.1 Basic jQuery
3.1.2 Advanced jQuery
3.2 Mootools
3.3 Prototype

We will now add some styles:

Listing 3: Adding more style to our menu

#nav li{
    float:left;
    position:relative;
}

This will align our list elements horizontally.

#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
}

Doing this will position the nested Lists right beyond the main menu. Also this will give them a width of 12em and the width attribute is required for the reason that the list items within display vertically again. As far as the top attribute is concerned, it should have the same value as the line-height attribute that we defined for #nav.

Listing 4: Displaying the width allotted to the menu

#nav li ul a{
    width:12em;
    float:left;
}

This will hence set the width of the hyper links to 12 em. This in combination with the width of the UL which is set above will result in a horizontally displayed sub menu, despite of the ongoing float:left)

Listing 5: Code displaying the positioning of the sub-menus

#nav ul ul{
	top:auto;
	}

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

#nav ul ul and #nav li ul ul is used to define where the sub menus are being displayed.

The hover states are used to define the items that are required to be displayed when hovering over an item.

The below menu is obtained post applying these styles:

Our menu

Figure 1: Our menu

If you are working with a browser other than IE6 you should have a basic dropdown menu now.

The below jQuery Code is used to create the effect:

Listing 6: jQuery Code to enhance the effect

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 $(document).ready(function(){
	mainmenu();
});

Step by step description:

$(" #nav ul ").css({display: "none"}); // Opera Fix

Here goes a small fix for Opera that doesn’t hide the menus fast enough, if you hover above them. This in turn creates a flickering effect. $(” #nav ul “) is the jQuery way in order to select all unordered lists in #nav.

Usage of the same is more or less similar to selecting CSS elements. The.css({display:”none”}) sets the display attribute for all Unordered lists to none.

$(" #nav li").hover(function(){ // here goes mouse over effect
                  },function(){ // here goes mouse out effect
                               });

This jQuery function is used for hovering which is very simple to use where in the first function allows you to define what happens when you hover over a specific item. The second function is used for the mouse out event.

$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show(400);

The first hidden unordered list is find by this function within the currently hovered list item and then displays it. The function “.show” works only under some special circumstances; this is the reason why we set the display to none.

$(this).find('ul:first').css({visibility: "hidden"});

In this mouse out event, we made use of visibility instead of display. This is for the reason that the show functions which is mentioned above is used to set display to “block” at the end of the animation. Using the same would hover just a short moment over the item and would not display for the ongoing animation which will then pop out all of a sudden. In case we use visibility, this will prevent this flickering.

$(document).ready(function(){
	mainmenu();
});

The function is used in order to call our mainmenu() function the moment the html document is ready.

Conclusion

The tutorial explained the readers on the process to create multilevel menu drop downs. Also we saw the process to improve the same with the help of jQuery. Hope you liked the article.



Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login