Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Master CSS Navigation and Menu Techniques

Master CSS Navigation and Menu Techniques

Good website navigation is vital part of any website. Good navigation is both user-friendly and complements the rest of the site’s design elements. Below are some techniques and tips for creating navigation that does both.

Create dropdown menus with CSS only
A complete tutorial on creating CSS-based dropdown menus that behave like dropdown lists. It’s a short and easy-to-implement method.

Create dropdown menus with CSS only

Simple scalable CSS based breadcrumbs
Using breadcrumbs on your site can make it easier for your visitors to navigate. And this tutorial shows a method for creating scalable breadcrumbs using CSS.

Simple scalable CSS based breadcrumbs

Horizontal Sub-nav with CSS & jQuery
Here’s a complete tutorial on creating a horizontal navigation submenu using purely CSS (in most cases, anyway). If you want it to work in IE6, you’ll need to implement some jQuery, too.

Horizontal Sub-nav with CSS & jQuery

CSS Step Menu
Creating a stepped menu (also referred to as a “wizard menu”) can be tricky, especially when it has to change the number of steps depending on what it’s being used for. Here’s an example of one with information on how to create your own.

 CSS Step Menu

The Tabbed Breadcrumb Navigation
A comprehensive tutorial on creating breadcrumb navigation formatted as tabs.

The Tabbed Breadcrumb Navigation

Apple’s Navigation bar using only CSS
This tutorial shows how to create an Apple-like navigation bar using only CSS and HTML (with no images).

 Apple's Navigation bar using only CSS

Sitemap Celebration
Here’s a sitemap style that’s cross-browser compatible (even back to IE5 for the Mac) and based on nested lists.

Sitemap Celebration

Nice CSS menu with feed reader icons list
Create a menu of feed reader icons using CSS. It could easily be adapted to other types of menus.

Nice CSS menu with feed reader icons list

Multi-level Menus with jQuery and CSS
Here’s a collection of techniques for creating multi-level menus in pure CSS and CSS/JS. In addition to basic techniques, it also covers more advanced and creative examples.

 Multi-level Menus with jQuery and CSS

 


Leave a comment