Scarica l'articolo in formato PDF
Leggerai questo articolo in: 4 minuti

Oggi ti propongo l’ennesima risorsa esclusiva rilasciata dai ragazzi di tympanus. Si tratta di uno straordinario menu testuale realizzato grazie all’ottimo jQuery.

Menu testuale realizzato con jQuery – Download gratuito.
Straordinario menu testuale animato realizzato con jquery

Questo menu è caratterizzato da una semplice implementazione e da un’ampia gamma di personalizzazione per soddisfare anche i gusti più esigenti.

Straordinario menu testuale animato realizzato con jquery

L’idea è quella di riprodurre un effetto slide-out degli elementi, animare il cambiamento di background e fare ritornare gli elementi su un nuovo sfondo con nuovi colori.

Straordinario menu testuale animato realizzato con jquery

Analizziamolo meglio:

Il Codice Html:

L’HTML, molto semplice è basato su una lista non ordinata, dove ogni elemento della lista conterrà un elemento di ancoraggio con i tre elementi all’interno che saranno animati.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ul id="sti-menu" class="sti-menu">
   <li data-hovercolor="#37c5e9">
	<a href="#">
	<h2 data-type="mText" class="sti-item">
        	Some text
	</h2>
       	<h3 data-type="sText" class="sti-item">
        	Some more text
	</h3>
	<span data-type="icon" class="sti-icon sti-icon-care sti-item">
		</span>
	    </a>
	</li>
	<li>...</li>
	...
</ul>

L’attributo data-hovercolor è utilizzato per impostare il colore del testo al passaggio del mouse (hover). Inoltre, vengono specificati alcuni data-type.

Il codice Css:

Si parte con lo stile della lista (nell’esempio viene data lunghezza fissa e viene centrata nella pagina)

1
2
3
4
5
6

.sti-menu li{
	float:left;
	width:200px;
	height:300px;
	margin:1px;
}

Vengono rimossi tutti gli owerflow per l’animazione

1
2
3
4
5
6
7
8
9
10
11
12

.sti-menu li a{
	display:block;
	overflow:hidden;
	background:#fff;
	text-align:center;
	height:100%;
	width:100%;
	position:relative;
	-moz-box-shadow:1px 1px 2px #ddd;
	-webkit-box-shadow:1px 1px 2px #ddd;
	box-shadow:1px 1px 2px #ddd;
}

Si assegna ai titoli una posizione assoluta

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.sti-menu li a h2{
	color:#000;
	font-family: 'Wire One', arial, serif;
	font-size:42px;
	font-weight:bold;
	text-transform:uppercase;
	position:absolute;
	padding:10px;
	width:180px;
	top:140px;
	text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
	font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
	font-size:18px;
	font-style:italic;
	color: #111;
	position:absolute;
	top:248px;
	width:180px;
	padding:10px;
}

Vengono definite le immagini per le icone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.sti-icon{
	width:100px;
	height:100px;
	position:absolute;
	background-position:top left;
	background-repeat:no-repeat;
	background-color:transparent;
	left:50px;
	top:30px;
}
.sti-icon-care{
	background-image:url(../images/care.png);
}
.sti-icon-alternative{
	background-image:url(../images/alternative.png);
}
.sti-icon-family{
	background-image:url(../images/family.png);
}
.sti-icon-info{
	background-image:url(../images/info.png);
}
.sti-icon-technology{
	background-image:url(../images/technology.png);
}

Codice jQuery:

Impostazioni di default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var settings = {
	// configuration for the mouseenter event
	animMouseenter		: {
		'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
		'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
		'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
	},
	// configuration for the mouseleave event
	animMouseleave		: {
		'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
		'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
		'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
	},
	// speed for the item bg color animation
	boxAnimSpeed		: 300,
	// default text color (same defined in the css)
	defaultTextColor	: '#000',
	// default bg color (same defined in the css)
	defaultBgColor		: '#fff'
};

Per ogni elemento viene specificata la velocità dell’animazione, l’effetto, il ritardo e la direzione.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

return this.each(function() {
	// if options exist, lets merge them with our default settings
	if ( options ) {
		$.extend( settings, options );
	}
 
	var $el 			= $(this),
		// the menu items
		$menuItems		= $el.children('li'),
		// save max delay time for mouseleave anim parameters
	maxdelay	= Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
							settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
							settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
						  ),
		// timeout for the mouseenter event
		// lets us move the mouse quickly over the items,
		// without triggering the mouseenter event
		t_mouseenter;
 
	// save default top values for the moving elements:
	// the elements that animate inside each menu item
	$menuItems.find('.sti-item').each(function() {
		var $el	= $(this);
		$el.data('deftop', $el.position().top);
	});
 
	// Events
	...
 
});

Viene inoltre definito l’evento “mouseenter” per ogni elemento del menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

$menuItems.bind('mouseenter', function(e) {
 
	clearTimeout(t_mouseenter);
 
	var $item		= $(this),
		$wrapper	= $item.children('a'),
		wrapper_h	= $wrapper.height(),
		// the elements that animate inside this menu item
		$movingItems= $wrapper.find('.sti-item'),
		// the color that the texts will have on hover
		hovercolor	= $item.data('hovercolor');
 
	t_mouseenter	= setTimeout(function() {
		// indicates the item is on hover state
		$item.addClass('sti-current');
 
		$movingItems.each(function(i) {
			var $item			= $(this),
				item_sti_type	= $item.data('type'),
				speed			= settings.animMouseenter[item_sti_type].speed,
				easing			= settings.animMouseenter[item_sti_type].easing,
				delay			= settings.animMouseenter[item_sti_type].delay,
				dir				= settings.animMouseenter[item_sti_type].dir,
				// if dir is 1 the item moves downwards
				// if -1 then upwards
				style			= {'top' : -dir * wrapper_h + 'px'};
 
			if( item_sti_type === 'icon' ) {
				// this sets another bg image position for the icon
				style.backgroundPosition	= 'bottom left';
			} else {
				style.color					= hovercolor;
			}
			// we hide the icon, move it up or down, and then show it
			$item.hide().css(style).show();
			clearTimeout($item.data('time_anim'));
			$item.data('time_anim',
				setTimeout(function() {
					// now animate each item to its default tops
					// each item will animate with a delay specified
					// in the options
					$item.stop(true)
						 .animate({top : $item.data('deftop') + 'px'}, speed, easing);
				}, delay)
			);
		});
		// animate the bg color of the item
		$wrapper.stop(true).animate({
			backgroundColor: settings.defaultTextColor
		}, settings.boxAnimSpeed );
 
	}, 100);	
 
})

Visualizza una demo da qui.
Scarica un esempio da qui.

Ti è piaciuto questo menu? Non dimenticare di condividere l’articolo con i tuoi amici!

[adsense]