Scuolissima.com - Logo

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.


Mostrare il menù solo su mobile

Prima di iniziare controllate che sia abilitato il tema per la versione mobile e impostatelo su "Personalizza".

Alcuni utenti preferiscono usare un menù più completo nella versione classica del blog mentre adottano questo menù solamente per la versione mobile. Per ottenere questo risultato bisogna trovare l'id del menù per il mobile e poi cercare il codice andando su Tema > Modifica HTML .

Se il nostro ID del widget si chiamasse ad esempio HTML5, bisognerà andarlo a selezionare dal menù a tendina e poi editare il codice in modo da aggiungere la parte evidenziata in giallo.
<b:widget id='HTML5' mobile='only' locked='false' title='' type='HTML'> 

In questo modo il widget del menù risulterà visibile solo a chi dispone di un dispositivo mobile.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies