In questo articolo troverete una raccolta di 25 Plugins per la navigazione sul web utili a migliorare l’usabilità del vostro sito.

Link: http://designm.ag/resources/jquery-navigation-plugins/…

Demo: http://www.outcut.de/MooFlow/example-skin.html

Codice Sorgente: http://www.outcut.de/MooFlow/Download.html…

CODICE HTML

 
<div id="lava">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">lava lamp menu</a></li>
<li><a href="#">queness.com</a></li>
<li class="selected"><a href="#">jQuery</a></li>
</ul>
 
	<!-- If you want to make it even simpler, you can append these html using jQuery -->
<div id="box">
<div class="head"></div>
</div>
</div>
 

CODICE CSS

 
	body {
		font-family:georgia;
		font-size:14px;
	}
	a {
		text-decoration:none;
		color:#333;
	}
 
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative;
		text-align:center;
		width:583px;
		height:40px;
	}
 
	#lava ul {
		/* remove the …

Demo: http://www.gayadesign.com/scripts/tabbed/

 
.tabbed_content {
	background-color: #000000;
	width: 620px;
}
 
.tabs {
	height: 62px;
	position: relative;
}
 
.tabs .moving_bg {
	padding: 15px;
	background-color:#7F822A;
	background-image:url(../images/arrow_down_green.gif);
	position: absolute;
	width: 125px;
	z-index: 190;
	left: 0;
	padding-bottom: 29px;
	background-position: bottom left;
	background-repeat: no-repeat;
}
 
.tabs .tab_item {
	display: block;
	float: left;
	padding: 15px;
	width: 125px;
	color: #ffffff;
	text-align: center;
	z-index: 200;
	position: …

…

CODICE HTML

<ul id=”navMenu”>

<li><a href=”#”>Test 1</a></li>

<li><a href=”#”>Test 2</a></li>

<li><a href=”#”>Test 3</a></li>

<li><a href=”#”>Test 4</a></li>

<li><a href=”#”>Test 5</a></li>

<li><a href=”#”>Test 6</a></li>

</ul>

…

…

Semlice menu orizzontale in jQuery.

Demo: http://www.onextrapixel.com/examples/horizontal-drop-down-menu/

Codice Sorgente: http://www.onextrapixel.com/examples/horizontal-drop-down-menu/horizontal-drop-down-menu.zip…

Demo: http://www.queness.com/resources/html/scrollmenu/index.html

Codice sorgente: http://www.queness.com/resources/archives/jquery-scrollmenu.zip…

…