MENU ANIMATO CON 11 VARIANTI JQUERY

P.Y.G.

MENU ANIMATO CON 11 VARIANTI JQUERY

Oggi vogliamo condividere un altro menu jQuery con voi. Questo menu avrà diversi pannelli, ognuno corrispondente ad una immagine di sfondo diverso, che vera' mostrata su tutti i pannelli quando si posiziona il mouse sopra una etichetta. Inoltre, un sottomenu fuoriesce dal fondo. Questo menu è dotato di alcune possibilità di configurazione, come la dimensione dell'immagine, l'effetto hover e gli stati di default personalizzati. L'idea di questa navigazione si basa sulla navigazione "Beautifull background image" con jQuery , un tutorial che ha avuto un effetto simile. Poiché era molto popolare e un sacco di nostri lettori ha chiesto alcune aggiunte molto utili, abbiamo deciso di rinnovare e rendere più facile da personalizzare.

Esempi Date un'occhiata a tutti gli esempi (si può anche passare da loro per tutte le altre demo): La struttura HTML è costituito dalla "sbi_container" che hanno tutti i pannelli interni:

<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 il percorso per l'immagine di sfondo che appare quando si passa sopra l'etichetta del rispettivo pannello. Diamo un'occhiata a un esempio per l'utilizzo verticale alternato scorrevole  su / giù .

$('#sbi_container').bgImageMenu({
 defaultBg : 'images/default.jpg',
 menuSpeed : 300,
 border  : 1,
 type  : {
  mode  : 'verticalSlideAlt',
  speed  : 450,
  easing  : 'easeOutBack'
 }
});

I seguenti parametri possono essere utilizzati per settare: defaultBg: l'immagine di default visualizzata quando nessuna etichetta è presente pos: se defaultBg non e' presente, pos indicherà il pannello che dovrebbe essere mostrato e aperto, width: la larghezza del contenitore e le immagini (che devono essere tutti della stessa dimensione), height: l'altezza del contenitore e delle le immagini,  bordo: la larghezza del margine tra i pannelli, menuSpeed: la velocità con cui deve scorrere il menù , Mod: il tipo di animazione, è possibile utilizzare def | dissolvenza | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt velocità: la velocità dell'animazione del pannello,  easing: l'effetto di andamento per l'animazione, seqfactor: ritardo tra ogni animazione  seqFade | seqHorizontalSlide | seqVerticalSlide | seqVerticalSlideAlt