31/03/2011

Menu Stile

Menu con effetto slide

In questo breve articolo vi presento un mio plugin jQuery per creare un semplice, ma simpatico, drop down menu (menu a tendina) con effetto slide. In realtà, devo essere sincero, non è tutta farina del mio sacco... il mio lavoro, infatti, è in realtà una rielaborazione di questo plugin che mi sono permesso di ottimizzare ed ampliare aggiungendo, appunto, l'effetto slide (srotolamento).

Vediamo come implementare il drop down menu

Per prima cosa, ovviamente, dobbiamo includere jQuery nella nostra pagina web:

<script type="text/javascript" src="jquery.js"></script>

Fatto questo dobbiamo creare, nel corpo del documento (<body>...</body>), il nostro menu il quale si compone di un elenco puntato al cui interno vi sono altri elenchi (che rappresentano le tendine che si "srotoleranno" al passaggio del mouse sulla voce madre). Ecco un esempio di codice:

<ul id="mrwddm">
  <li><a href="http://www.mrwebmaster.it/">Mr.Webmaster</a></li>
  <li><a href="#">Javascript</a>
    <ul>
      <li><a href="http://www.mrwebmaster.it/javascript/guide/">Guide</a></li>
      <li><a href="http://www.mrwebmaster.it/javascript/articoli/">Articoli</a></li>
      <li><a href="http://www.mrwebmaster.it/javascript/faq/">FAQ</a></li>
    </ul>
  </li>
  <li><a href="#">Scrit</a>
    <ul>
      <li><a href="http://www.mrwebmaster.it/script/applet-java/">Applet Java</a></li>
      <li><a href="http://www.mrwebmaster.it/script/javascript/">Javascript</a></li>
      <li><a href="http://www.mrwebmaster.it/script/script-php/">PHP</a></li>
      <li><a href="http://www.mrwebmaster.it/script/script-aspnet/">ASP.Net</a></li>
    </ul>
  </li>
  <li><a href="http://forum.mrwebmaster.it/">Forum</a></li>
  <li><a href="http://blog.mrwebmaster.it/">Blog</a></li>
  <li><a href="http://tools.mrwebmaster.it/">Tools</a></li>
</ul>

Il nostro menu deve essere, ovviamente, opportunamente stilizzato. Per farlo sarà sufficiente aggiungere nel foglio di stile queste righe di codice CSS:

ul#mrwddm { margin: 40px 0px 20px 0px; padding: 0px; }
#mrwddm li { float: left; display: inline; list-style: none; }
#mrwddm li a { display: block; padding: 3px 10px; margin: 0px; text-decoration: none; white-space: nowrap; background: #EEEEEE; }
#mrwddm li a:hover { background: #CCCCCC; color: #FFFFFF; }
#mrwddm li ul { min-width: 120px; margin: 3px 0px 0px 0px; padding: 0px; position: absolute; z-index: 999; visibility:hidden; display: none; }
#mrwddm li ul li { float: none; display: inline; }
#mrwddm li ul li a { padding: 5px 3px; background: #EEEEEE; color: #666666; }
#mrwddm li ul li a:hover { background: #CCCCCC; color: #FF6600 }

Per finire non resta che aggiungere, nell'header della pagina (<head>...</head>) il codice Javascript che creerà il nostro effetto. Il codice è composto da diverse funzioni, la più importante è mrwddm_open() che effettua una serie di controlli per capire se esiste una tendina da aprire e, in caso affermativo, ne altera il CSS e poi la rende visibile mediante il metodo slideDown(). Vediamo il codice Javascript completo:

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function mrwddm_open() {
  // verifico se l'elemento contiene una sotto-menu (tendina)
  if ($(this).children('ul').length > 0) {
    // in caso affermativo stoppo il timer di chiusura
    mrwddm_stoptimer();
    // identifico la tendina
    ddmenuitem = $(this).children('ul');
    // se non è visibile...
    if (ddmenuitem.is(':hidden')) {
      // chiudo tutto
      mrwddm_closeall();
      // apro la tendina interessata con il metodo slideDown()
      ddmenuitem.css('visibility','visible').slideDown();
    }
  // se non c'è una tendina d'aprire...
  }else{
    // chiudo tutto
    mrwddm_closeall();
    ddmenuitem = 0;
  }
}

// questa funzione chiude tutte le tendine eventualmente aperte
function mrwddm_closeall() {
  $('#mrwddm li ul').css('visibility','hidden').hide();
}

function mrwddm_close() {
  if (ddmenuitem) {
    ddmenuitem.css('visibility','hidden').hide();
    ddmenuitem = 0;
  }
}

// imposto un timer per la chiusura
function mrwddm_timer() {
  if (ddmenuitem) closetimer = window.setTimeout(mrwddm_close, timeout);
}

// stoppo l'esecuzione del timer di chiusura
function mrwddm_stoptimer() {
  if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = 0;
  }
}

// al caricamento del DOM
$(document).ready(function(){
  // intercetto gli eventi mouseover e mouseout sulle voci di menu
  $('#mrwddm > li').bind('mouseover', mrwddm_open);
  $('#mrwddm > li').bind('mouseout',  mrwddm_timer);
});

// se clicco sul documento chiudo tutto
document.onclick = mrwddm_closeall();

Buon menu con effetto slide

Menu Sito Web

19:11 Scritto da: networkweb in Menu Stile | Link permanente | Commenti (0) | Segnala | Tag: menu stile, menu con effetto slide, menu sito, menu, menu web, crea menu, menu gratis, home page, menu network, codice menu | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook