Home > DeveloperSection > Blogs > CSS3 animated dropdown menu

CSS3 animated dropdown menu


CSS-CSS3 HTML5  CSS  CSS Selector  CSS Menu 
Ratings:
0 Comment(s)
 979  View(s)
Rate this:

CSS3 animated dropdown menu

Hi friends In this article I’m explaining about CSS3 features animated dropdown menu usin css3.

Description:

Creating a dropdown menu is the most easy way to provide a hierarchal index of different menu items on the website. We could use jQuery scripts to make advanced dropown menu items with animations. But here we are going to make a complete CSS only dropdown menu with animations

It's a sure thing that CSS3 features like transitions, animations and transforms can add extra.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

in this article you'll learn how to create an animated CSS3 dropdown menu

Lets start by the basic HTML frame for a dropdown menu.

HTML

<ul id="menu">

    <li><a href="#">Home</a></li>

    <li>

        <a href="#">Categories</a>

        <ul>

            <li><a href="#">CSS</a></li>

            <li><a href="#">Graphic design</a></li>

            <li><a href="#">Development tools</a></li>

            <li><a href="#">Web design</a></li>

        </ul>

    </li>

    <li><a href="#">Work</a>

        <ul>

            <li><a href="#">CSS</a>

                <ul>

                    <li><a href="#">CSS</a></li>

                    <li><a href="#">Graphic design</a></li>

                    <li><a href="#">Development tools</a></li>

                    <li><a href="#">Web design</a></li>

                </ul>

            </li>

            <li><a href="#">Graphic design</a>

                <ul>

                    <li><a href="#">CSS</a></li>

                    <li><a href="#">Graphic design</a></li>

                    <li><a href="#">Development tools</a></li>

                    <li><a href="#">Web design</a></li>

                </ul>

            </li>

            <li><a href="#">Development tools</a></li>

            <li><a href="#">Web design</a></li>

        </ul>

    </li>

    <li><a href="#">About</a></li>

    <li><a href="#">Contact</a></li>

</ul>

 

Output

 

This is a 3 level deep menu structure built with basic nested unordered list items. We are wrapping the whole menu in <nav> element as that is the HTML5 standard. You can see that we have nested <ul> items within the <li> items. We give a class of  ‘submenu’ to these nested <ul>  items. These are the sub menu items. The parent <li> item that holds the sub menu item is given the ‘parent’ class name. Lets apply some CSS to this.

CSS

#menu, #menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

#menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: linear-gradient(#444, #111);

    border-radius: 6px;

    box-shadow: 0 1px 1px #777;

}

#menu:before,

#menu:after {

    content: "";

    display: table;

}

 

#menu:after {

    clear: both;

}

 

#menu {

    zoom:1;

}

 

#menu li {

    float: left;

    border-right: 1px solid #222;

    box-shadow: 1px 0 0 #444;

    position: relative;

}

 

#menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

}

 

#menu li:hover > a {

    color: #fafafa;

}

 

*html #menu li a:hover { /* IE6 only */

    color: #fafafa;

}

 

#menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 1;   

    background: #444;  

    background: linear-gradient(#444, #111);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 

    border-radius: 3px;

    transition: all .2s ease-in-out;

}

 

#menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

}

 

#menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    box-shadow: -1px 0 0 rgba(255,255,255,.3);     

}

 

#menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

 

#menu ul li:last-child {  

    box-shadow: none;   

}

 

#menu ul a {   

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

}

 

#menu ul a:hover {

    background-color: #0186ba;

    background-image: linear-gradient(#04acec, #0186ba);

}

 

#menu ul li:first-child > a {

    border-radius: 3px 3px 0 0;

}

 

#menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

}

 

#menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

}

 

#menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

}

 

#menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;  

}

 

#menu ul li:last-child > a {

    border-radius: 0 0 3px 3px;

}

In the CSS  we give the menu a width of 960px and a height of 50px . Each list item is floated left and given a position relative property. Positioning the list items with relative positioning is the key in displaying dropdown submenu items later. We also apply some background color and link colors to the menu items.

 

The Result is

 

 in my next post i'll explain about Learn HTML5 New Features


Don't want to miss updates? Please click the below button!

Follow MindStick