Leggerai questo articolo in: 2 minuti

Oggi ti propongo l’ennesimo ottimo lavoro realizzato dai ragazzi di tympanus. Si tratta di un originale menu di navigazione realizzato con jQuery.

Bellissimo menu ricco di effetti realizzato con jquery (Sliding Background Image Menu)

Questo tipo di menu è molto ricco di effetti e di facile personalizzazione. In particolare viene fornito con numerose possibilità di configurazione, come la dimensione dell’immagine di sfondo e l’effetto hover da mostrare.

Vediamo come utilizzarlo:

Effetti che potrai ottenere:

Codice Html:

La struttura html è molto semplice e fondamentalmente è basata su un div contenitore (“sbi_container”) il quale contiene i sottomenu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="sbi_container" class="sbi_container">
	<div class="sbi_panel" data-bg="images/1.jpg">
		<a href="#" class="sbi_label">About</a>
		<div class="sbi_content">
			<ul>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
				<li><a href="#">Subitem</a></li>
			</ul>
		</div>
	</div>
	<div class="sbi_panel" data-bg="images/2.jpg">
		...
	</div>
	...
</div>

L’attributo “data-bg” contiene l’indirizzo dell’immagine da mostrare sull’ hover.

Codice jQuery:

Esempio particolare su effetto up/down

1
2
3
4
5
6
7
8
9
10
$('#sbi_container').bgImageMenu({
    defaultBg   : 'images/default.jpg',
    menuSpeed   : 300,
    border      : 1,
    type        : {
        mode        : 'verticalSlideAlt',
        speed       : 450,
        easing      : 'easeOutBack'
    }
});

Ovviamente come anticipato potremo andare a specificare ulteriori parametri per una personalizzazione totale in base alle nostre preferenze.

Ecco alcuni esempi:

  • defaultBg: L’immagine da visualizzare di default quando non si ha l’Hover
  • pos: se non è definito un defaultBg, pos indica il pannello che deve essere mostrato
  • width: la lunghezza del contenitore e delle immagini (dovrebbero avere le stesse dimensioni)
  • height: l’altezza del contenitore e delle immagini
  • border: il margine da lasciare tra i pannelli
  • menuSpeed: la velocità con cui il menu risale
  • mode: il tipo di animazione. Si può scegliere tra def | fade | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt
  • speed: velocità dell’animazione sul pannello
  • easing: effetto easing per l’animazione
  • seqfactor: ritardo dell’animazione per seqFade | seqHorizontalSlide | seqVerticalSlide | seqVerticalSlideAlt

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]