Awesome 24 CSS (in some cases with jQuery) Navigation and Menu Tutorials

The most important part of designing a new site is the navigation or menu system, but this can be tricky, time consuming and often frustrating. You need something that will fit into your design and most importantly, allow your readers to navigate with ease. Below you will find 24 CSS (in some cases with a little jQuery) Navigation and Menu Tutorials to help you on your way.

Vimeo-Like Top Navigation

URL : Vimeo-Like Top Navigation »
Description : If you like the top navigation used on Vimeo, you will love this tutorial. The menu drops down when you hover over the search box and tt offers you different search options that you can choose and narrow your search.
This is an excellent tut to give you an insight into how the high-end sites cleverly use CSS.
Demo : View Demo »

Tabbed Navigation Using CSS

URL : Tabbed Navigation Using CSS »
Description : In this thoroughly detailed (and easy to follow) tutorial you will be taught how to create low-bandwidth tab navigation on a web page using CSS, as an extra bonus you'll also learn how to switch tabs without loading the page more than once.
Demo : View Demo »

Sexy Drop Down Menu with jQuery and CSS

URL : Sexy Drop Down Menu with jQuery and CSS »
Description : In this tutorial you will learn how to create a 'sexy' drop down menu that will also degrade gracefully with CSS and a some jQuery. Excellent tutorial from Noupe,as always.
Demo : View Demo »

Bulletproof CSS Sliding Doors

URL : Bulletproof CSS Sliding Doors »
Description : A variant on the original sliding doors tecnique from Douglas Bowman, this tutorial tackles issues such as dead pixel areas, empty <span> tags, Internet Explorer and older browser inconsistencies and solving the problem of increased font-sizes.
Demo : View Demo »

Vertical CSS menu with jQuery toggle effect

URL : Vertical CSS menu with jQuery toggle effect »
Description : In this tutorial you will learn how to create a vertical CSS menu with a show/hide feature using jQuery.

PHP and CSS menu

URL : PHP and CSS menu »
Description : You will learn how to use PHP to control CSS styles to highlight the tab or hit area of a html menu with styles controlled by CSS.
Demo : View Demo »

DropDown CSS Menu

URL : DropDown CSS Menu »
Description : This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6.
Demo : View Demo »

Pure CSS Vertical Navigation Menu

URL : Pure CSS Vertical Navigation Menu »
Description : You will build the second most common site menu navigation, the vertical navigation menu, in this tutorial. You are going to be using only pure CSS and unordered lists to create the vertical navigation menu with three levels of pop outs. Thie navigation menu will work in IE5, IE6, IE7 and IE8 as well as Firefox and Safari.
Demo : View Demo »

Nested Side Bar Menu

URL : Nested Side Bar Menu »
Description : This is a simple yet professional looking multi level side menu. Markup wise it's just a regular nested UL list, turned into a drop down menu using a very small JavaScript code.
Demo : View Demo »

CSS Overlapping Tabs Menu

URL : CSS Overlapping Tabs Menu »
Description : In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs, that is easily customised, lightweight and versatile.
Demo : View Demo »

Creating a glassy non div navigation bar

URL : Creating a glassy non div navigation bar »
Description : In this tutorial you will not use any divs, instead you will be forming a navigation bar using a unordered list. This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.
Demo : View Demo »

Rounded corner CSS navigation bar with jQuery

URL : Rounded corner CSS navigation bar with jQuery »
Description : You will be shown how to add some nice round corner effect to your anchor elements with jQuery, for your navigation, without using any image.

Create a multilevel Dropdown menu with CSS and jQuery

URL : Create a multilevel Dropdown menu with CSS and jQuery »
Description : This tutorial is split into two parts, the first part is dedicated to the task of building a working CSS-only dropdown menu , the second part will show you how you can pimp the whole thing with a few lines of jQuery.
Demo : View Demo »

CSS Navigation Menus

URL : CSS Navigation Menus »
Description : This tutorial will teach you how to create different menu styles for a main menu, submenu, and footer menu.

Simple CSS Vertical Menus

URL : Simple CSS Vertical Menus »
Description : In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

Multi-Level CSS Dropdown Menu in Dreamweaver CS4

URL : Multi-Level CSS Dropdown Menu in Dreamweaver CS4 »
Description : Traditionally, multi-level dropdown menu navigation have been done in JavaScript, these kinds of menus can be very confusing for a beginner, and even more confusing to go back and edit later. You will learn how to do this better and more beautifully with CSS and Dreamweaver CS4.
For this tutorial, you’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right.
Demo : View Demo »

Designing the Digg Header

URL : Designing the Digg Header »
Description : The Digg navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big. Like the Vimeo tutorial above, this is also an excellent tut to give you an insight into how the high-end sites cleverly use CSS.
Demo : View Demo »

Pure CSS Fish Eye Menu

URL : Pure CSS Fish Eye Menu »
Description : A pure CSS technique to transform your icon menu into an interactive zooming icon navigation menu inspired from Mac OSX Dock with fish eye effect. One of many ways to style html list tags into interactive, usable, and accessible menu using pure CSS.
Demo : View Demo »

CSS Navigation Image Rollovers

URL : CSS Navigation Image Rollovers »
Description : This tutorial will show you how to create a navigation menu with image rollovers built with CSS that uses only one image and very minimal HTML / CSS code.
Demo : View Demo »

Vertical CSS Menu With a ‘Behavior’ File

URL : Vertical CSS Menu With a ‘Behavior’ File »
Description : This tutorial will teach you how to build a vertical CSS menu with rollover submenu’s. The menu will be written in CSS and HTML, and will also use a so-called ‘behavior’ file.
Demo : View Demo »

Navigation bar with tabs using CSS and sliding doors

URL : Navigation bar with tabs using CSS and sliding doors »
Description : Create a simple navigation bar with tabs using CSS with status effects active, hover and link with PHP URL variables to set a tab "active" when the relative page is loaded.

CSS Sprite Navigation

URL : CSS Sprite Navigation »
Description : This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.
Demo : View Demo »

CSS Menus (with some help from jQuery)

URL : CSS Menus (with some help from jQuery) »
Description : The menu in the image of the dynamic menu are driven completely by CSS and work in all modern browsers, create up to 3 sub menus, hover persistence and uses jQuery for IE fixes. Nice and simple.

CSS Play Navigation Menus

URL : CSS Play Navigation Menus »
Description : If you are not aware of CSSplay.co.uk or Stu Nicholls, shame on you. If you are serious about CSS then get yourself over there, have a look at the many possibilties of CSS and view the hundreds of working CSS Demos. Below you will find his latest CSS menus. Great resource.

View more CSS menus from CSSplay »

Read More

Awesome 10 Responsive Navigation Solutions and Tutorials

As responsive design rapidly increases in popularity, we felt we would take a look at some of the varied solutions and techniques that are being adopted for managing the navigation/menu on smaller screened devices.

Planning and building your menu for mobiles will perhaps be the trickiest aspect of your responsive layout, not just with the coding but also having to decide what will stay and what will have to go to fit everything into the smaller screen. It is a juggling act between both readability and the desire to show as much on the screen as possible.

Hopefully the solutions we have for you below will help get you on your way.

Progressive And Responsive Navigation (Tutorial)

This tutorial, from Smashing Magazine, takes you through the steps for coding your navigation using a little forethought and considering the principles of progressive enhancement from the beginning and applying some responsive practices at the end, allowing your navigation to easily accommodate less-capable browsers and modern browsers in both desktop and mobile environments.

Progressive And Responsive Navigation →Demo →

Responsive Navigation Menu (Tutorial)

With this tutorial you will learn how to code a simple and effective responsive navigation menu, with a grid layout, that you will be able to easily modify and reuse in your own projects.

Responsive Navigation Menu →Demo →

TinyNav.js (jQuery Plugin)

TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screens. It also automatically selects the current page and adds selected="selected" for that item.

TinyNav.js →Demo →

Responsive Drop Down Navigation Menu (Tutorial)

The code for this menu is based on the famous Suckerfish Dropdown menu, restyled to make it responsive. It will work great in all modern desktop browsers without Javascript.

Responsive Drop Down Navigation Menu →Demo →

HorizontalNav (jQuery Plugin)

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. It comes with an option to make it responsive, allowing the navigation to auto-adjust when the window is resized.

HorizontalNav →

Responsive, Mobile-First Navigation Menu (Tutorial)

This tutorial demonstrates how to develop a complex responsive navigation menu using the "Mobile-First Approach". The aim is to present mobile users with a pseudo-native, touch-conducive and interactive interface that enables them to navigate the website with ease.

Responsive, Mobile-First Navigation Menu →Demo →

SelectNav.js (Javascript Plugin)

SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a <select> drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

SelectNav.js →Demo →

Convert a Menu to a Dropdown for Small Screens (Tutorial)

Convert a Menu to a Dropdown for Small Screens →Demo →

Simple Responsive Menu

This tutorial takes a typical desktop menu and shows you how to, using Modernizr, jQuery and media queries, convert it to a small menu button for smaller screens that only appears when pressed, and pressing it again will retract it.

Simple Responsive Menu →

Mobile Menu (jQuery Plugin)

Mobile Menu is a jQuery plugin that turns your site's navigation into a dropdown (<select>) when your browser is at mobile widths. It comes with a handful of options, including the really useful "combine", that allows you to convert multiple navigation lists into a single dropdown.

Mobile Menu →

Further Reading & Resources…

• Responsive Navigation Patterns →
  Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. This detailed article, from Brad Frost, takes a look at the various ways of handling navigation for small screen sizes and discusses how mobile navigation must strike a balance between quick access to a site’s information and unobtrusiveness.


• Scalable Navigation Patterns in Responsive Web Design →
  Here are some of the lessons learned by Michael Mesker, from palantir.net, while working on a recent real-life, large-scale project. Specifically, this post focuses on how they chose to deal with deep navigation in the landscape of a templated environment.


• 7 Responsive Navigation Patterns →

Read More

Awesome 10 More Responsive Navigation Solutions

Last August we published our original post on responsive navigation solutions, and even after only six months that post seems out-dated and almost reduntant. RWD techniques are moving on so fast that we felt we had to publish an up-to-date post for you.

Last year converting your navigation into a <select> drop-down menu was all the rage. Now, its all about the “three line” toggle menu, drawer-style nav and animated side panels (Facebook-a-like). Hope these resources help you:

Basic Responsive “Three Line” Menu (CSS & jQuery)

This tutorial shows you how to, with a relatively short amount of code, progressively enhance a responsive site and build a “three line” responsive menu without adding additional markup to the page. All additional markup will be included dynamically using jQuery.

Responsive Three Line Menu →

Responsive Multi-Level Navigation (CSS & jQuery)

With this approach to responsive navigation, you’re shown how to accommodate large, multi-level menus using media queries and jQuery, whilst trying to keep the markup as simple as possible and any external resources kept a minimum.

The aim is to build, on larger screens, a horizontal drop-down menu, with up to two levels of sub-menus that appear when the parent element is hovered over. And on smaller screens, a menu button that will display the menu vertically, displaying sub-menus when the parent element is clicked or touched.

Responsive Multi-Level Navigation →Demo →

Responsive Toggle Menu (CSS & jQuery)

This tutorial with show you how to, when the browser window is at mobile sizes, build a navigation bar that will “magically” transform into a dropdown list at mobile sizes and at tablet sizes and up, will remain as the horizontal menu bar.

Responsive Toggle Menu →Demo →

Animated jPanelMenu (jQuery Plugin)

jPanelMenu is a jQuery plugin that creates an animated paneled-style menu (like the type seen in the mobile versions of Facebook and Google). Animation is handled by CSS transitions for browsers that support it and are hardware-accelerated on supporting devices, so the animations are silky smooth. For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback.

jPanelMenu →Demo →GitHub →

CSS: Responsive Navigation Menu (CSS-only)

With this technique you will be shown how to create a responsive menu, without JavaScript, using clean and semantic HTML5 markup. The menu can be aligned left, center or right and this will toggle on hover, which is much more user-friendly than on click. This technique works on all mobile and desktop browsers including Internet Explorer.

Responsive Navigation Menu →Demo →

Smooth Responsive Dropdown Menu – Top Drawer (CSS & jQuery)

This tutorial demonstrates how to create a smoother reveal mobile menu using CSS3 rather than animating it with JavaScript. Once you click the menu icon, the click event will assign the class of active to the drawer container which alters the translate value to bring the drop-down menu nice and smoothly into view.
Modernizr will detect whether the user's device is capable of CSS transforms, if it isn't the menu will simply show and hide the menu after the button is pressed.

Top Drawer →

Simple Responsive Navigation (CSS & jQuery)

With this tutorial, you will be shown a very simple approach for building a responsive menu from the ground up using CSS3 media queries and a little jQuery to display the menu on a smaller mobile screen.

Simple Responsive Navigation →Demo →

Mobile Drawer-Style Menu (jQuery Plugin)

This jQuery Mobile Menu Plugin creates a drawer-style navigation on your mobile site, as seen on iOS.

Mobile Drawer-Style Menu →

MeanMenu – A Media Query Independent Navigation (jQuery Plugin)

MeanMenu jQuery Plugin →DemoGitHub →

CSS3 Responsive Menu (CSS-only)

This tutorial offers a step by step instructions to building a responsive navigation menu that adapts to varying screen sizes (in a block-style), using media queries.

CSS3 Responsive Menu →Demo →

Simple & Responsive Mobile First Navigation (CSS-only)

In this tutorial you will learn how to build a simple and straight-forward mobile layout and navigation, then progressively enhance the design for larger screens, using media queries that detect steadily increasing screen sizes, adding style and features as you go.

Simple & Responsive Mobile First Navigation →Demo →

‘Stacking’ Responsive Menu (Proof of Concept)

Please note that this solution is a proof of concept and should not be used in production. Having said that, go ahead and view the demo (link below) and resize your window and you will see the amazing ‘stacking effect’ of each of the pages sections.

Stacking Responsive Menu →Demo →

Read More

Awesome Jump To – Smooth Jump-To Sub Navigation Menu 2013

Jump To is a jQuery plugin that let you create a smooth jump to sub navigational menu in one JS call. The menu can be used to assist your navigation for pages with a lot of content.

Website Demo

Read More

Awesome menuFlip – jQuery Plugin for Flipping Navigation Menu 2013

menuFlip is a jQuery plugin for adding a ‘ flipping ’ effect to text based navigational menu items when hovered over without needing to use background images, which can be a pain.

Website Demo

Read More