Realizzare un menu orizzontale a scomparsa con jQuery

Qui il Live Demo e qui il Codice Sorgente

I menu a scomparsa sono un ottima soluzione per sfruttare maggiormente l’area visibile della pagina web. Vengono usati molto spesso e sono particolarmente adatti nei casi in cui il testo sia autocontenuto nella finestra.

Iniziamo costruendo una tabella con i div dove al suo interno metteremo una riga, la quale a sua volta conterrà delle celle con le voci del menu. Qui il codice html della sezione:

<header>
   <div id="hidetopsection">&nbsp;</div>
   <div id="topsection">
      <div class="menu_table">
         <div class="menu_table_row">
         <div onclick="location.href='index.php';" class="menu_table_cell">Home<br/><br/></div>
         <div onclick="location.href='chisiamo.php';" class="menu_table_cell">Chi Siamo<br/><br/></div>
         <div onclick="location.href='staff.php';" class="menu_table_cell">Lo staff<br/><br/></div>
         <div onclick="location.href='curriculum.php';" class="menu_table_cell">Curriculum<br/><br/></div>
         <div onclick="location.href='contatti.php';" class="menu_table_cell">Contatti<br/><br/></div>
      </div>
   </div>
</header>

Le voci del menu sono realizzate utilizzando i div come dei pulsanti, con il parametro onclick facciamo eseguire il codice javascript location.href=’index.php’; per aprire il link desiderato. Ed utilizziamo il parametro :hover nel css per far cambiare aspetto al pulsante quando il mouse vi passa in cima. Come possiamo vedere da questo estratto di css:

.menu
{
    margin-left: 1.5em;
    text-align: left;
    margin-top: 1em;
    font-size:  2em;
}
 
div.menu_table{
    display: table;
    font-size: 1.2em;
    line-height: 21px;
    border-spacing: 1px;
    margin: 0px;
    padding: 0px;
}
 
div.menu_table_row{
    display: table-row;
}
 
div.menu_table_cell{
    float: left;
    display: table-cell;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    padding: 10px 20px;
    color: #6d1313;
    cursor: pointer;
}
 
div.menu_table_cell:hover{
    color: white;
    background: #6d1313;
    display: table-cell;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    padding: 10px 20px;
    cursor: pointer;
}

Per abbellire maggiormente il menu importiamo il font utilizzando il comando css @font-face. Qui il codice css della sezione:

@font-face {
  font-family: 'AR Bonnie';
  src: url('../fonts/arbonnie.ttf');
}

Inoltre sempre per abbellimento metteremo un filtro di sfumatura e che va dal bianco (#fff) al grigio (#ddd) con dei margini arrotondati e un effetto di ombra come è possibile vedere dal css:

#topsection{
    position: fixed;
    height: 4em;
    float: left;
    top: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'AR Bonnie';
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    -moz-border-bottom-right-radius: 0.5em;
    -moz-border-bottom-left-radius: 0.5em;
    -webkit-border-bottom-right-radius: 0.5em;
    -webkit-border-bottom-left-radius: 0.5em;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#dddddd); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#dddddd)"; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 
    background: -moz-linear-gradient(top,  #fff,  #ddd);
    z-index: 1000;
}
 
#hidetopsection{
    position: fixed;
    height: 4em;
    float: left;
    top: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

Infine inseriremo il seguente javascript a piede della pagina html il quale farà apparire e scomparire il menu con una piccola accortezza, ovvero quella di creare una div invisibile come area di attivazione, poiché il comando fadeOut di jQuery disattiva il div #topsection che contiene il menu

Qui il codice javascript:

   $(document).ready(function() {
      $( "#topsection" ).mouseleave(function(){$(this).fadeOut(500);});
      $( "#hidetopsection" ).mouseenter(function(){$("#topsection").fadeIn(500);});
   });

Qui il Live Demo e qui il Codice Sorgente

Taggato con: , , , , , , , , ,
2 comments on “Realizzare un menu orizzontale a scomparsa con jQuery
  1. Hi, yes this article is actually good and I have learned lot of things from it on
    the topic of blogging. thanks.

3 Pings/Trackbacks per "Realizzare un menu orizzontale a scomparsa con jQuery"
  1. […] vi segnalo questo tutorial per realizzare un menu a scomparsa orizzontale, mi sembra fatto bene: http://francescopasetto.com/2012/06/…sa-con-jquery/ Rispondi […]

  2. […] a tutti segnalo questo tutorial per realizzare menu a scomparsa con jQuery mi sembra fatto bene.http://francescopasetto.com/2012/06/28/realizzare-un-menu-orizzontale-a-scomparsa-con-jquery/<font color="#222222" face="arial, sans-serif" size="2"></font> Pubblicato 1 day fa # […]

  3. […] Prova a dare un occhio a questo menu a scomparsa se togli le 2 righe di javascript rimane fisso:http://francescopasetto.com/2012/06/28/realizzare-un-menu-orizzontale-a-scomparsa-con-jquery/ Pubblicato 1 week fa […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*