Here are 10 Fresh CSS-based Navigation Menu Tutorials to provide users with an impressive interface. You’ll find a variety of techniques that truly showcase the capabilities of CSS.

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.

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.

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.

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.

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.

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.

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.

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?

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.

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.