CSS3 is slowly but surely creeping into mainstream web design, more and more designers are using it, albeit in small doses, but it is certainly gathering momentum. It really is an exciting time for web design.
A few weeks back we published an article called 20 CSS3 Tutorials and Techniques for Creating Buttons just to start the CSS3 ball rolling, this time around we focus on some menu and navigation techniques that make use of the wonderful new properties that CSS3 offers.
Please bare in mind that for the most part these tutorials have not been written for usage in the wild, they are more experimental, a demonstration of what can be achieved and will be used in the near future.
All of the demos from these tutorials render perfectly well with Chrome and Safari (albeit with minor discrepancies), Firefox struggles with a couple (especially Zurbs OS X Dock, which even look awful with 3.6) and IE, rather surprisingly, rendered most of the demos better than expected.
In this tutorial you will learn how to create an animated sliding vertical menu using some cool CSS3 properties, like ‘
-webkit-transition:’ which will allow you to animate the ‘
:hover’ state of a simple un-ordered list.
By adding styling to the anchor tags some fancy
-webkit-box-shadow you will give the menu some shape and depth and complete it with a background image for each list item to enhance the interfaces effect – Basically, making them look like their coming from underneath the ridge.
In this tutorial you can learn how to create a Mac-like multi-level dropdown menu that uses CSS3s
It all renders perfectly with Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3-Only Horizontal Drop Line Tab Menu
Recently, WebDesignerWall posted a cool tutorial on creating a dropdown menu using only CSS3 (the tutorial above). This time, in this tutorial the author demonstrates a different approach to the same menu with an equally effective outcome.
View Tutorial »Demo »
Basically this tutorial shows you how to build the current Apple web site top level navigation, but without any images at all – just 100% pure CSS.
This tutorial come from the cool people at Zurb, who created the Super Awesome Buttons, the Radiocative Buttons, the Polaroid Images with Only CSS3 tutorial and much more. Based on there experience you know you are in for something special with this CSS3 tut.
Using the the latest in CSS3 properties they take a basic list of links and turn them into an awesome looking OS X dock of icons. It all renders perfectly with Chrome and Safari, but not so well with Firefox.
The major empowering concept with this tut is the CSS pseudo selector
:target is used in conjunction with ID selectors. The selector will match when the current URL contains a hash-tag of that exact ID.
Everything works pretty well with all browsers, with, as expected, IE needs a little tweaking.
As with most of the tutorials in this article, this is an experimental tutorial using the new features of CSS3. The effects can be seen in only the latest Webkit Browsers, as such, the gradients work in Firefox 3.6 but not the
In this tutorial, you will be using the following CSS3 properties to create this 'Sweet' tabbed nav bar:
rgba; opacity, text-shadow, pseudo selectors, rounded corners, gradients and
There are not many tutorials that will use this many new CSS3 properties, so if you feel like rolling up your sleeves and learning as many new CSS3 features in one go, this tutorial is for you.
With this tutorial you will learn how to build a basic CSS tabbed content section that changes on hover, powered by only CSS3.
-webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three:
It is using these powerful transitions and traditional CSS that you can learn how to create the dropdown navigation menu from this tutorial.
Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. This is a tutorial explaining how to create great looking buttons using only CSS3.
This technique is not limited to creating a menu. The same CSS can be applied to regular links to create easy and great looking navigation menu, call to action buttons, submit buttons, or any other button you can think of!
View Tutorial »Demo »
An accordion effect can be achieved by using CSS3’s
Each part of the accordion has an ID, heading and content region. The header includes a link that matches the section’s ID, whilst the content is wrapped in a container which will control its display.
In yet another variation of the popular “accordion effect”, in this tutorial you will learn how to recreate an accordion effect that makes use of webkits CSS transitions. It uses the CSS3
:target pseudo class to know which item to show based on the URI fragment identifier (the # in the url).
In this tutorial you will learn how to create a dynamic stack of index cards, that could be easily used as a menu, with HTML and CSS3, and use such CSS3 features as
transition (for the dynamic effects) and
border-radius (for the styling).
Build a Chunky CSS3 Menu
View Tutorial »Demo »