Advertisement

Build an Awesome Versatile CSS3 Menu With jQuery Fallback

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

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.


Introduction



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.

Advertisement