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.
Questo menu è caratterizzato da una semplice implementazione e da un’ampia gamma di personalizzazione per soddisfare anche i gusti più esigenti.
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.
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]
28 Luglio 2011 il 16:08
Ho provato ad utilizzare questo menu, ma non so per quale motivo, su explorer non funziona bene…provate a passare sulle icone con il mouse…non appena togliete il puntatore da una delle voci, non si vede più niente…. -.-‘ odio questo browser!!!!!
28 Luglio 2011 il 16:44
Ciao, con che versione di IE non funziona? Io ho fatto un test veloce con IE7 e sembrerebbe funzionare correttamente. Fammi sapere 🙂