Html5 and css3 drop down menu

There are tons of tutorials about menus in general and drop down menus in particular, so why make a new one? Well recently i was surfing some forums and saw that a lot of people ask about that issue. i think this is a good enough reason:)

The html code contain some of the new tags that version 5 give us: the header tag, the nav tag and the footer tag. html5 allow us to build a more semantic web pages since it describe better what is on the page. So,for example, instead on creating a div with an id of nav we can just use the nav tag. The same goes for the header and footer tags: these are not just useful for the header and footer of the page but also for a certain area or element. In a blog we can give a header and a footer for each blog post.

Since this is not a tutorial about html5 i do not give more details then is necessary. The point here is that html5 make us write a more semantic and well formed pages and force us not to caught  divititus .

So we have a nav tag and a list which is the best way to orgenize a navigation system.In oreder to create the drop area we create an inner list in the appropriate list item. that means an li tag contain a ul tag with its own li tags. Any drop down menus are nothing but a list within a list.

In our case, since i want to open a place for a large amount of inner lists i wrap it with a div (using html5 does not exclude using divs, it just give us this rule: if no semantic tags are appropriate use divs).

Now lets see the css code. Our main issue is making the main list horizontal and making the inner lists to appear and disappear when needed:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(243, 255, 223);
    direction: rtl;
   
}

header#main-header{
    width: 100%;
    height: 15em;
    background-color: rgb(126, 180, 4);

    background: -webkit-gradient(linear, left top, left bottom, from(rgb(126, 180, 4)), to(rgb(70, 134, 1)));
    background:  -moz-linear-gradient(rgb(126, 180, 4), rgb(70, 134, 1));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7EB404', endColorstr='#468601',GradientType=0 ); /* ie */

    -webkit-box-shadow: 0px 0px 8px #323332;
    -moz-box-shadow: 0px 0px 8px #323332;
    box-shadow: 0px 0px 8px #323332;



}

/********** menu *****************/
nav{
    position: absolute;
    right: 20em;
    top: 12.8em;

}


nav ul li.mainli{

    float: right;
    list-style: none;

}

nav ul li.mainli:hover > div.wrapper{
    display: block;
}

nav ul li.mainli a.mainlinks{
    text-decoration: none;

    padding:  8px 20px;
    color: #FFF;
    display: block;

    background: #7d7e7d;  /*old browsers*/

    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);  /*firefox*/

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));  /*webkit*/

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie*/




    -webkit-box-shadow: 1px 0px 3px #292929;
    -moz-box-shadow: 1px 0px 3px #292929;
    box-shadow: 1px 0px 3px #292929;

}

nav ul li.mainli  a.mainlinks:hover{
    background: #000;
    color: #FFEE99;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#000',GradientType=0 ); /* ie*/
}

nav ul li div.wrapper  div.inner   ul.innerul  li.innerli  a.innerlinks:hover{
    background: #000;
    color: #FFEE99;
}

nav ul li.mainli a.active{
    background: #000;
    color: #FFEE99;
}

nav ul li.mainli  >  div.wrapper{
    background-color: #666666;
    display: none; /* make the drop hidden*/
    position: absolute;
    right: 2px;
    width:550px;   /*enable the inner divs to be displayed horizontally*/
    z-index: 100; /*make the wrapper appear above other contents*/

    -webkit-box-shadow: 0px 0px 8px #323332;
    -moz-box-shadow: 0px 0px 8px #323332;
    box-shadow: 0px 0px 8px #323332;
}



nav ul li.mainli > div.wrapper div.inner{
    width: 150px;
    float: right;
    margin: 10px ;
    background-color: #ccc;
}


nav ul li.mainli > div.wrapper div.inner h4{
    text-shadow: 0px 1px 0px #333;
    color: #000;
    margin-bottom: 5px;
    margin-right: 55px;
}

nav ul li.mainli > div.wrapper div.inner ul li.innerli{
    margin-bottom: 3px;
    display: block;
}

nav ul li.mainli > div.wrapper div.inner ul li.innerli a.innerlinks{
    text-decoration: none;

    padding:  8px 20px;
    color: #FFF;
    display: block;

    background: #7d7e7d;  /* old browsers*/

    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);  /*firefox*/

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));  /*webkit*/

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );  /*ie*/
}


 

I just want to concentrate only on the important code for our purposes. If you have questions you are welcome to write in the comments.

What makes the main list to be horizontal is that li.mainlinks is flauted. Flaut (left or right) makes each li tags to be placed one on the side of the other. Note that i have used css3 to present the links with gradients and with shadows. Notice that we should take care for different browsers in the process.

The next big issue is the wrapper div that contain the inner lists. Here we should notice that the display is none. That hide it as the default. The width of the wrapper div determine the amount of inner lists on each row. Another thing is the z-index i gave it in order to make it appear on top of elements that might disturb the open menu.

I gave flaut to the inner lists too to make them appear horizontally.

That is it. We have a pure html and css drop down menu with no JavaScript. Obviously we can add css3 animations but this is a basic example to show the main principle for a drop down.

I have added the file here for you to download. The css is included with the html Which is not a best practice. you should separate them in different files.

view demo

Leave a Reply

Your email address will not be published. Required fields are marked *