Here are some great tutorials from the professional designers and developers that may be useful for you to create navigation menu using CSS3.

Building a Circular Navigation with CSS Transforms

In this tutorial, you’ll learn how to create an awesome circular navigation with the use of CSS transforms. You will learn step by step how to create this style, including a thorough explanation on the math techniques used in order to achieve them.

Tutorial Building a Circular Navigation with CSS Transforms →

Colorful CSS3 Animated Navigation Menu

In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts (which is practically all of them). To add icons to elements, you only need to assign a class name and the icon will be added with a :before element by the font awesome stylesheet.

Tutorial Colorful CSS3 Animated Navigation Menu →

How To Create a Trendy Flat Style Nav Menu in CSS

I’ve heard from a bunch of people who found my CSS drop down menu tutorial really useful, so today’s we’re going to build another menu with some fancy hover effects. With the Flat design trend being so popular we’ll use adopt this style for today’s menu by using bright solid colours and clean icons. We’ll be using various must-know CSS techniques so this is a great tutorial for any web designers learning the basics.

Tutorial How To Create a Trendy Flat Style Nav Menu in CSS →

Off Canvas Menu with CSS :target

“Off Canvas” patterns are different ways to approach layout where content on the web isn’t just laid out in a vertical column. For instance, navigation could be positioned hidden off the left edge of the “canvas” (visible browser window) and slid in on demand. Anthony Colangelo created jPanelMenu to do just that. Hakim El Hattab’s Meny is fancier but similar in what it accomplishes.

Tutorial Off Canvas Menu with CSS :target →

Creating CSS Only Horizontal Navigation

There are many features you can use in CSS to create great looking navigation menus, in this tutorial the look will be very simple but I will show you the CSS needed to create the drop down menus on mouse hover of the list items.

Tutorial Creating CSS Only Horizontal Navigation →

Pure CSS3 breadcrumb navigation

This tutorial also uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of gradients for the links whereas the second demo uses flat colors along with transitioned hover effects for the navigation.

Tutorial Pure CSS3 breadcrumb navigation →

Css-only Lavalamp-like Fancy Menu Effect

This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css – using css3 transitions and the general sibling combinator selector.

Tutorial Css-only Lavalamp-like Fancy Menu Effect →

Drop-Down Navigation: Responsive and Touch-Friendly

What if you need a multi-level navigation? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and/or cursorless screens?

Tutorial Drop-Down Navigation: Responsive and Touch-Friendly →

How to Create a CSS3 Mega Drop-Down Menu

In this tutorial You’ll learn you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content.

Tutorial How to Create a CSS3 Mega Drop-Down Menu →

Horizontal centering using CSS fit-content value

The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it’s about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths.

Tutorial Horizontal centering using CSS fit-content value →

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

Next in the Orman Clark’s coded PSD series is his awesome looking Vertical Navigation Menu. We’ll recreate it with CSS3 and jQuery while using the minimal amount of images possible.

The only images we’ll be using are for the icons – I’ll be creating a sprite using a new tool called SpriteRight, but this is optional. Additionally, I’ll be using GradientApp to create my CSS3 gradients, but again this is optional.

Tutorial Orman Clark’s Vertical Navigation Menu: The CSS3 Version →

Flexible Nav

Tutorial Flexible Nav →

How to Create a CSS3 Tabbed Navigation

Hiya folks! Today we’re going to have fun creating a CSS3 Tabbed Navigation. In this tut we’re going to be creating the darkwash jean version out of the many different themes available for these awesome tabs just because… #1 we can and #2, there is more styling involved and I can show you more neat tricks with CSS3 than with the other styles. If you prefer, there are much simpler themes in the source files so feel free to follow along with those as the structure is pretty much the same.

Tutorial How to Create a CSS3 Tabbed Navigation →

Circle Navigation Effect with CSS3

Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

Tutorial Circle Navigation Effect with CSS3 →

Creative CSS3 Animation Menus

Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.

Tutorial Creative CSS3 Animation Menus →

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

Tutorial CSS3 Dropdown Menu →

Pure CSS3 LavaLamp Menu

I think that you have already seen animated menus with LavaLamp effect (based on jQuery plugin). Today I would like you to tell how to repeat same behavior only with CSS3 (without any javascript). I have to use CSS3 transitions in our menu (to animate elements). So, if you are ready, lets start.

Tutorial Pure CSS3 LavaLamp Menu →

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

Tutorial How to Build a Kick-Butt CSS3 Mega Drop-Down Menu →

CSS3 Minimalistic Navigation Menu

As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).

But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

Tutorial CSS3 Minimalistic Navigation Menu →

Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.

Tutorial Create a Slick Menu using CSS3 →

How to Create a CSS3 Wheel Menu

There’s no better way to learn CSS3 than to get your hands dirty on an actual project and that’s exactly what we’re going to do. I’m going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let’s get started on some CSS3 magic!

Tutorial How to Create a CSS3 Wheel Menu →

Convert a Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose.

Tutorial Convert a Menu to a Dropdown for Small Screens →

Sexy CSS3 menu

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.

Tutorial Sexy CSS3 menu →