Hey there, this is my first post on 2012 and today you’ll learn how to create a simple and clean CSS3 menu in just a few steps.
I know, there are so many CSS3 menu tutorials in the wild (including here on RTD) but I hope you will love this one also.
CSS3 menu tutorials
Below is a list with other CSS3 menu articles you may have read here:
- Sexy CSS3 menu
- CSS3 animated dropdown menu
- Cool CSS3 navigation menu
- Vertical dropdown menu with CSS3 and jQuery
The idea for this CSS3 navigation menu came to me while watching this button on UI Parade. Usually, when I see design stuff on the internet, I try to image how can I make it using CSS3. I think this a professional habit.
Check the markup below, simple and effective:
Also, do not forget to include the following snippet when using HTML5 specific tags like
The following lines do not contain the vendor-specific properties like
-webkit-. From now on, I think this is how I’ll present the CSS in my articles. Just keep in mind that you can always find the full code in the demo page source.
To be short: reset the margin and padding for the unordered list, also center align the
inline-block list elements:
For the menu elements, instead using float I chose the
inline-block alternative. If you want to find out more about
inline-block pros and cons, I’d recommend Robert Nyman’s article: CSS display: inline-block: why it rocks, and why it sucks.
The below is the most interesting part, in my opinion. Without, adding any extra markup and using a pseudo-element you will be able to create a cool effect:
I hope you enjoyed this article and I’m looking forward to hear your thoughts about it. Thanks for reading!
RTD's top 10 most read articles of 2011
Cool headings with pseudo-elements