One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.
In today’s article, you’ll learn how to create a good looking menu using some CSS3 magic.
If you are a web developer you may have heard of tools called CSS pre-processors. Less is probably the most well known CSS preprocessor, but that is another story.
While visiting LESS’s site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only.
LESS download button - at this time
Pretty clean, except for the
span element. You’ll see further why we need that
The demo example contains also a header and a logo (so, extra styles), but I’ll list here only the styles used for this menu.
Removing the default list styles
Style the proper links
Multiple CSS3 properties were used to create the above.
Style the inner span element
If above you have seen how the menu looks in modern browsers, here’s how the menu look in older browsers:
Fallback styles for older browsers
You can simply adjust its size by updating the link’s font-size:
No images, so there are less HTTP image requests, also easy to maintain and update.
You could easily transform this menu into a nice dropdown menu.
The menu we created using this tutorial isn’t a Sci-Fi one or a super mega complex one. The main purpose is to see how CSS3 can help us achieve interesting effects without needing images anymore.
I hope you enjoyed this tutorial, thanks for reading it!