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"> </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
Hi, yes this article is actually good and I have learned lot of things from it on
the topic of blogging. thanks.
I’ve been loonikg for a post like this forever (and a day)