Archive for 'menu'


MooFlow, effetto CoverFlow con MooTools!

Posted on 03. Sep, 2009 by daniele.

0

m05

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

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

Continue Reading

Lava Lamp menu in jQuery

Posted on 18. Aug, 2009 by daniele.

0

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 list style and spaces*/
		margin:0;
		padding:0;
		list-style:none;
		display:inline;
 
		/* position absolute so that z-index can be defined */
		position:absolute; 
 
		/* center the menu, depend on the width of you menu*/
		left:110px;
		top:0; 
 
		/* should…

Continue Reading

Tab animati con jQuery!

Posted on 01. Aug, 2009 by daniele.

0

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: relative;
	cursor: pointer;
}
 
.tabbed_content .slide_content {
	overflow: hidden;
	background-color: #000000;
	padding: 20px 0 20px 20px;
	position: relative;
	width: 600px;
}
 
.tabslider {
	width: 5000px;
}
 
.tabslider ul {
	float: left;
	width: 560px;
	margin: 0px;
	padding: 0px;
	margin-right: 40px;
}
 
.tabslider ul a {
	color: #ffffff;
	text-decoration: none;
}
 
.tabslider ul a:hover {
	color: #aaaaaa;
}
 
.tabslider ul li {
	padding-bottom: 7px;
}
 
 
//tab effects
 
var TabbedContent = {
	init: function() {
		$(".tab_item").mouseover(function() {
 
			var background = $(this).parent().find(".moving_bg");
 
			$(background).stop().animate({
				left: $(this).position()['left']
			}, {
				duration: 300
			});
 
			TabbedContent.slideContent($(this));
 
		});…

Continue Reading

Menu animato in jQuery!

Posted on 27. Jul, 2009 by daniele.

0

Demo: http://www.devirtuoso.com/Examples/jQuery-Navigation/

Codice Sorgente: http://www.devirtuoso.com/Examples/jQuery-Navigation/jquery-Nav.zip

Continue Reading

Creare un attractive menu in jQuery!

Posted on 24. Jul, 2009 by daniele.

0

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>

CODICE CSS
body {
background:#222;
}
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li {
float:left;
/* default background image */
background:url(default.jpg) no-repeat center center;
/* width and height of the menu item */
width:120px;
height:70px;
/* simulate pixel perfect using border */
border-left:1px solid #111;
border-right:1px solid #333;
border-top:1px solid #555;
border-bottom:1px solid #333;
/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */
position:relative;
}
#navMenu li a {
/* z-index must be higher than .hover class */
z-index:20;
/* display as block and set the height according to the height of the menu to make the whole LI clickable */
display:block;
height:70px;
position:relative;
color:#777;
}
#navMenu li .hover {
/* mouseover image */
background:url(over.jpg) no-repeat center center;
/* must be postion…

Continue Reading

Una navigazione superiore differente

Posted on 22. Jul, 2009 by daniele.

0

Demo: http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo/index.html

Codice Sorgente: http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo.zip

Continue Reading

Drop Down Menu jQuery

Posted on 17. Jul, 2009 by daniele.

0

In un sito il menu è un elemento molto importante per accedere attraverso i contenuti. L'esempio che trovate qui sotto consiste in un menu a discesa che può avere un numero qualsiasi di livelli.

Demo: http://demo.lateralcode.com/jquery-menu/

Codice Sorgente: http://www.lateralcode.com/wp-content/uploads/jquery-menu.zip

Continue Reading

Menu orizzontale in jQuery

Posted on 11. Jul, 2009 by daniele.

0

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

Continue Reading

Scroll menu con jQuery!

Posted on 18. Jun, 2009 by daniele.

0

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

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

Continue Reading

25 Scripts per Dropdown Navigation Menu

Posted on 14. Apr, 2009 by Administrator.

0

I menu di navigazione sono importanti per qualsiasi sito web. Ben progettati sono in grado di migliorare l'aspetto di un sito così come l'usabilità. Per i più grandi siti con un sacco di pagine o contenuti, menu a discesa sono popolari perché li può rendere più facile per passare attraverso il sito con meno clic. In questo post ci caratteristica 25 script per menu a discesa che si può utilizzare sul proprio sito.

http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/

Continue Reading

1 2 »