sastgroup.com

MooFlow, effetto CoverFlow con MooTools!

Posted on 03. Sep, 2009 by daniele.

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.

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.

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.

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.

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>

Continue Reading

Una navigazione superiore differente

Posted on 22. Jul, 2009 by daniele.

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.

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