Scarica l'articolo in formato PDF

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]