Navigation Menus
1 – How To Create A Mootools Inspired Navigation Effect Using jQuery
As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but we’ll do it in jQuery!
2 – jQuery idTabs
idTabs is a plugin for jQuery. It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.
3 – Pure CSS Menu
Easily create a easy drop down menus with only CSS, there are even templates you can select from.
4 – Create an apple style menu and improve it via jQuery
Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
5 – Creating a Floating HTML Menu Using jQuery and CSS
For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.
6 – Superfish – “menu jQuery plugin”
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).
7 – jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definetely will like it.
8 – jQuery Menu: Dropdown, iPod Drilldown
The iPhone is indeed a very good example of minimalistic, but great looking, design. This article will teach you how you can easily achieve the same effect on any website, using the power of JQuery.
Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.
10 – JQuery Sliding Menu
This tutorial explains and let you download sliding jquery menu and you can see the effect in action over on the PSDtuts webpage in the top right hand corner.
This is how looks finished demo version:
11 – CSS Sprites 2 – It’s JavaScript Time
12 – How to make a smooth animated menu with JQuery
A very nice tutorial to learn to create a very nice and artistic effect for your websites.
13 – Animated JQuery menu
Among other things, JQuery is very useful for an easy manipulation of the CSS background-position property. This tutorial is a perfect example to illustrate that possibility.
Althought this menu is not, in my opinion, the best looking of this article, it has always be a client’s favorite.
14 – Using jQuery for Background Image Animations
JQuery is great for animating backgrounds using the background-position CSS property. This article is very great to improve your skills in that domain.
15 – Simple JQuery Accordion menu
This is a simple Accordion menu done in JQuery. Links with subitems under them will expand the submenu when clicked. Items that don’t have subitems are normal links. The menu initialises with the first submenu expanded.
16 – jQuery (mb)Menu
This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!
You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component will get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.
17 – jQuery Simple Drop Down Menu
18 - jBreadCrumb – An Auto Collapsing Breadcrumb
This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages. Rather than limit the amount of elements shown on the sever side, we decided to go with a client side solution for usability and SEO reasons. It also turned out nice to look at and fun to play with.
19 – jGlideMenu
jGlideMenu is an updated version of the fastFind Menu that supports inline and AJAX menu definitions and uses an easier syntax than the original version.
20 – Create a Slick Tabbed Content Area using CSS & jQuery
One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.
21 – jQuery Link Nudging
A subtle link animation achieved by adding left padding on mouseover and removing it on mouseout.
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
It’s important to keep the nudge small and quick, so the animation is set to 20 pixels over 400 milliseconds.
22 – Create Vimeo-like top navigation
Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.
23 – Coda Slider
24 – Menumatic Mootools
MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
25 – jQuery convertion: Garagedoor effect using Javascript
For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!
