Creare menù responsive drop down Blogger


Quando si realizza un tema si parte sempre dall'intestazione e la parte più importante dell'header è il menù di navigazione in alto, che fornisce collegamenti utili per navigare nelle pagine interne del blog. Su Wordpress è una cosa normale utilizzare un menù responsive, cioè che si vede bene sia dalla versione desktop, sia su quella mobile ma per Blogger ancora c'è poca roba. Ho trovato un blog inglese che spiega come creare un menù drop down responsive che è veramente bello ma ha anche delle limitazioni. E' un menù che utilizza HTML5 e CSS3, compatibile con tutti i principali browser e può tornare utile a chi utilizza la versione mobile del blog e si ritrova sprovvisto di menù.

Per far funzionare il menù responsive dovete attivare la versione mobile del blog. I menù delle pagine non si riescono a visualizzare bene mentre questo è davvero facile da usare ed ha pure le sottosezioni, eccovi uno screenshot:



Consigliamo prima di procedere di eseguire il salvataggio del modello, poi si consiglia anche di rimuovere tutti i menù esistenti in alto e utilizzare solamente questo, tra l'altro è anche più veloce a caricare a differenza di altri.

Dovete cercare il tag </b:skin> ed inserire prima di esso questo codice css:
/*-----Responsive Drop Down Menu by MBT ----*/
body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}
}

Per cambiare il colore dello sfondo dovete modificare:  #50B7DC
Per cambiare il colore dello sfondo al passaggio del mouse dovete modificare:  #5FC6EB


Adesso create un widget HTML, posizionatelo sopra il riquadro "main - post del blog" ed incollate il seguente codice:
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Menu&#160;Scuolissima</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
       </ul>
    </nav>

Per personalizzare il menù potete sostituire il testo "Menu Scuolissima" con il titolo del vostro blog. Potete aggiungere degli spazi tra una parola e l'altro usando l'unicode &#160; 

Per creare delle sottosezioni dovete incollare il codice qui sottostante sotto <ul> o sopra </ul>:
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
</ul>
</li> 

Questa personalizzazione permette di creare una sola lista a tendina e non più elenchi a discesa, perché non ha senso complicare la visualizzazione del layout, per i dispositivi mobili la semplicità è la cosa migliore.

Se non possedete internet sul cellulare consiglio di utilizzare uno di questi tools per visualizzare i siti nella versione mobile da computer.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".