1. Web Design
  2. Complete Websites

Build an Awesome Versatile CSS3 Menu With jQuery Fallback

Read Time:1 minLanguages:

In this screencast tutorial I'll show you how to build an awesome, versatile navigation menu. It features notification bubbles, a Mega Menu and unlimited sub menus (as we'll be smart with our CSS selectors). There'll be some cool CSS3 transitions, plus we'll write a jQuery plugin to rescue older browsers which don't support the effects.


Basic Menu

In this first section we'll concentrate on building and styling our basic menu, including the submenu.

CSS3 Effects

In this part we'll add some CSS3 effects; a simple fade-in effect, plus a more elaborate sliding transition.

Mega Menu

Let's now begin building our mega-menu, starting off with the markup..

jQuery Effects

To round everything off, let's now write a jQuery plugin to act as an effects backup for legacy browsers.

Appendix: In this last section, at 4m50s, I've omitted the var keyword (resulting in a global variable instead of being local). It still works of course, but a local variable is preferable.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.