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.
In this first section we'll concentrate on building and styling our basic menu, including the submenu.
In this part we'll add some CSS3 effects; a simple fade-in effect, plus a more elaborate sliding transition.
Let's now begin building our mega-menu, starting off with the markup..
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post