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 a CSS3 dropdown menu that appears using a small animation when the user hovers over an element with the cursor.
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 markup is based on an unordered list
The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:
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:
Please notice the #menu li:hover > aselector. 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 about CSS selectors.
Dropdown menu animation
With CSS3 transitions 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:
First and last elements styles
The jQuery code
As you already get used to, IE6 gets some extra attention:
While the :hoverpseudo-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.
Mobile navigation support
This is something I wished to do for a while and I finally made it. I just added support for mobile devices and fixed the navigation for the iPad.
You know how much I love CSS only solutions, but this time we’ll be using some jQuery to enhance this menu. To view the result, you can narrow your browser window or browse it with your smartphone.
The viewport meta tag
To maintain everything at the correct scale, the first thing added is the viewport meta tag:
Small markup update
You need to wrap the above HTML structure using something like: <nav id="menu-wrap">. This will be our relative holder for the mobile navigation.
The jQuery add
After page loads, we’ll add the #menu-trigger element which does exactly what you think: will trigger the mobile menu when it will be clicked. Further, in the CSS, you’ll see that this element is displayed using CSS3 media queries.
Another thing here is the iPad device detection. As you can see below, we’ll remove the fancy transition effect and stick to toggling display: none/block. This way, the functionality will be maintained also on the iPad.
The mobile CSS
Here, the CSS3 media queries do the trick. We’ll add CSS rules to override the initial styles:
I hope you enjoyed this article and the plethora of CSS techniques used above!