15 CSS3 Navigation and Menu Tutorials and Techniques

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.

jQuery Style Vertical Menu with CSS3 – No Javascript

jQuery Style Vertical Menu with CSS3 - No Javascript

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-border-radius and -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.

View Tutorial »Demo »

CSS3 Dropdown Menu

CSS3 Dropdown Menu

In this tutorial you can learn how to create a Mac-like multi-level dropdown menu that uses CSS3s border-radius, box-shadow, and text-shadow.
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.

View Tutorial »Demo »

CSS3-Only Horizontal Drop Line Tab Menu

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 »

Apple’s Navigation Bar Using only CSS

Apple’s Navigation Bar Using only CSS

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.

View Tutorial »Demo »

Recreating the OS X Dock with CSS

Recreating the OS X Dock with 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.

View Tutorial »Demo »

CSS3-Only Tabbed Area

CSS3-Only Tabbed Area

In this tutorial CSS Tricks tackles the traditionally JavaScript tabs with only CSS, more specifically CSS3.
The major empowering concept with this tut is the CSS pseudo selector :target. :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.

View Tutorial »Demo »

Create a Slick Menu using CSS3

Create a Slick Menu using CSS3

In this article the developer attempts to mimic the navigation menu on the Dragon Interactive website using only CSS (no images, and no JavaScript).
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 fade-in and fade-out transition.

View Tutorial »Demo »

Sweet Tabbed Navigation Bar using CSS3

Sweet Tabbed Navigation Bar using CSS3

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 box-shadow.
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.

View Tutorial »Demo »

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript

With the new techniques in CSS3 accompanied by clever application of existing CSS, it is increasingly stepping on the toes of JavaScript.
With this tutorial you will learn how to build a basic CSS tabbed content section that changes on hover, powered by only CSS3.

View Tutorial »Demo »

Nicer Navigation with CSS Transitions

Nicer Navigation with CSS Transitions

CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects. There are three properties that make up the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three: -webkit-transition.
It is using these powerful transitions and traditional CSS that you can learn how to create the dropdown navigation menu from this tutorial.

View Tutorial »Demo »

Create an Advanced CSS3 Menu

Create an Advanced CSS3 Menu

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 »

Accordion Using Only CSS3

Accordion Using Only CSS

An accordion effect can be achieved by using CSS3’s :target pseudo-class, without requiring JavaScript.
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.

View Tutorial »Demo »

Create the Accordion Effect Using CSS3

Create the Accordion Effect Using CSS3

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).

View Tutorial »Demo »

Use CSS3 to Create a Dynamic Stack of Index Cards

Use CSS3 to Create a Dynamic Stack of Index Cards

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 transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

View Tutorial »Demo »

Build a Chunky CSS3 Menu

Build a Chunky CSS3 Menu

View Tutorial »Demo »

Author: (645 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments