Today's Question:  What does your personal desk look like?        GIVE A SHOUT

CSS3 animated dropdown menu

  Catalin Rosu        2011-11-15 12:47:05       3,323        0    

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.

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

CSS3 animated dropdown menu

View demo

Here’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:

Remember the previous CSS3 dropdown menu? That menu is awesome, and thanks to you is the most popular tutorial around here (at this time).

Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited. The reason I’m saying that is because in this article you’ll learn how to create an animated CSS3 dropdown menu based on our previous example.

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<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></li>
       
<li><a href="#">About</a></li>
       
<li><a href="#">Contact</a></li>
</ul>

The CSS

I revised and improved the styles in order to create this unique CSS3 animated dropdown menu. So, below you can find the commented pieces of styles:

Mini reset

Reset the default ul styles.

#menu, #menu ul {
        margin
: 0;
        padding
: 0;
        list
-style: none;
}

Main level

The #menu is basically the main ul for this menu. CSS3 things like gradientsshadows androunded corners help us to create the below:

CSS3 menu wrapper

#menu {
        width
: 960px;
        margin
: 60px auto;
        border
: 1px solid #222;
        background
-color: #111;
        background
-image: -moz-linear-gradient(#444, #111);
        background
-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        background
-image: -webkit-linear-gradient(#444, #111);
        background
-image: -o-linear-gradient(#444, #111);
        background
-image: -ms-linear-gradient(#444, #111);
        background
-image: linear-gradient(#444, #111);
       
-moz-border-radius: 6px;
       
-webkit-border-radius: 6px;
        border
-radius: 6px;
       
-moz-box-shadow: 0 1px 1px #777;
       
-webkit-box-shadow: 0 1px 1px #777;
        box
-shadow: 0 1px 1px #777;
}

Clear floats

Here is Nicolas Gallagher‘s clearing method I’ve been using lately:

#menu:before,
#menu:after {
        content
: "";
        display
: table;
}

#menu:after {
        clear
: both;
}

#menu {
        zoom
:1;
}

List elements

CSS3 menu elements styles

Please notice the #menu li:hover > a selector. This is perhaps the most important CSS trick for this CSS3 dropdown menu.

So, this is how this works: Select an “a” element that is child of a “li” ; the “li” element must be a descendant of the “#menu”. Read more here.

#menu li {
       
float: left;
        border
-right: 1px solid #222;
       
-moz-box-shadow: 1px 0 0 #444;
       
-webkit-box-shadow: 1px 0 0 #444;
        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;
}

Submenus

With CSS3 transitons we can animate changes to CSS properties like margin or opacity. This is very cool and I’ve used this for animating the CSS3 sub-menus. The result is great if you ask me:

#menu ul {
        margin
: 20px 0 0 0;
        _margin
: 0; /*IE6 only*/
        opacity
: 0;
        visibility
: hidden;
        position
: absolute;
        top
: 38px;
        left
: 0;
        z
-index: 9999;
        background
: #444;
        background
: -moz-linear-gradient(#444, #111);
        background
: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background
: -webkit-linear-gradient(#444, #111);
        background
: -o-linear-gradient(#444, #111);
        background
: -ms-linear-gradient(#444, #111);
        background
: linear-gradient(#444, #111);
       
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
       
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box
-shadow: 0 -1px 0 rgba(255,255,255,.3);
       
-moz-border-radius: 3px;
       
-webkit-border-radius: 3px;
        border
-radius: 3px;
       
-webkit-transition: all .2s ease-in-out;
       
-moz-transition: all .2s ease-in-out;
       
-ms-transition: all .2s ease-in-out;
       
-o-transition: all .2s ease-in-out;
       
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*/
       
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
       
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box
-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
       
float: none;
        display
: block;
        border
: 0;
        _line
-height: 0; /*IE6 only*/
       
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box
-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
       
-moz-box-shadow: none;
       
-webkit-box-shadow: none;
        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: -moz-linear-gradient(#04acec,  #0186ba);
        background
-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background
-image: -webkit-linear-gradient(#04acec, #0186ba);
        background
-image: -o-linear-gradient(#04acec, #0186ba);
        background
-image: -ms-linear-gradient(#04acec, #0186ba);
        background
-image: linear-gradient(#04acec, #0186ba);
}

First and last list elements styles

#menu ul li:first-child > a {
       
-moz-border-radius: 3px 3px 0 0;
       
-webkit-border-radius: 3px 3px 0 0;
        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 {
       
-moz-border-radius: 0 0 3px 3px;
       
-webkit-border-radius: 0 0 3px 3px;
        border
-radius: 0 0 3px 3px;
}

The jQuery

As you already get used to, IE6 gets some extra attention:

$(function() {
 
if ($.browser.msie && $.browser.version.substr(0,1)<7)
 
{
        $
('li').has('ul').mouseover(function(){
                $
(this).children('ul').css('visibility','visible');
               
}).mouseout(function(){
                $
(this).children('ul').css('visibility','hidden');
               
})
 
}
});

While the :hover pseudo-class does not work for other elements than anchor, we just need to add this small jQuery snippet to fix it. It's pretty self-explanatory.

View demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Source:http://www.red-team-design.com/css3-animated-dropdown-menu

ANIMATION  CSS3  DROP DOWN MENU  ANIMATED MENU 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.