Come aggiungere menù nella versione mobile di Blogger


I menù, più conosciuti con il termine "menù di navigazione" sono estremamente utili per fornire un supporto di ricerca ai visitatori di un sito. essi consentono ai visitatori di cercare l'esatto contenuto cercato passando attraverso delle categorie specifiche. Tuttavia, i menù utilizzati sino ad oggi possono andare bene per gli utenti che si connettono da pc mentre chi invece utilizza la navigazione da mobile potrebbe visualizzarlo molto piccolo, distorto o addirittura non  visualizzarlo. nel caso in cui state cercando di aggiungere un menù responsive su un blog Blogger, visibile anche dai cellulari allora siete al posto giusto! In questo articolo vi verrà mostrato come aggiungere facilmente un menù su blogger nella versione mobile.

Questo tipo di menù verrà visualizzato anche nella versione normale del blog, però si adatta a seconda del applicativo utilizzato per collegarsi. Nel seguente screenshot potete chiaramente vedere lo stesso menù che appare diverso sul desktop e sullo smartphone:



Per installarlo dovete innanzitutto attivare la versione mobile del blog, poi recatevi su Modello > Modifica HTML ed incollare il seguente codice ovunque vogliate ma dopo il tag <body>  . Tenete a mente che il termine "ovunque" si riferisce al fatto che in base a dove lo piazzate, esso apparirà, per cui in certi modelli andrebbe messo subito dopo mentre in altri dopo qualche riga... questo è il codice:
<!---Menu--> <nav id='nav-main'>
    <ul>
        <li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Gallery</a></li>
        <li><a href=''>Tutorials</a></li>
        <li><a href=''>Contact</a></li>
    </ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
</div>

Per farlo apparire correttamente è necessario aggiungere anche lo stile al menù, per fare questo dovete cercare ]]></b:skin> e prima di esso dovete aggiungere il seguente codice:
#nav-trigger {
    display: none;
    text-align: center;
}
#nav-trigger span {
    display: block;
    background-color: #279CEB;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
}
nav#nav-mobile {
    margin: 0px;
}
nav {
    margin-bottom: 30px;
}
nav#nav-main {
    background-color: #279CEB;
    margin: 0px;
    float: left;
}
nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
nav#nav-main li {
    display: inline-block;
    float: left;
    ont-family: 'Open Sans', sans-serif;
}
nav#nav-main li:last-child {
    border-right: none;
}
nav#nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
nav#nav-main a:hover {
    background-color: #3AB0FF;
    text-decoration: none;
    color: #fff;
}
nav#nav-mobile {
    position: relatifve;
    display: none;
}
nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 30px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
}
nav#nav-mobile a:hover {
background-color: #e6002d;
color: #fff;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
    display: block;
}
nav#nav-main {
    display: none;
}
nav#nav-mobile {
    display: block;
}
}

Dopo aver aggiunto il codice HTML e CSS, dovete anche inserire il seguente codice javascript, altrimenti non vi funzionerà correttamente. Quindi aggiungetelo appena prima del tag </head>  .
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});
//]]>
</script>
Una volta che avete finito di aggiungere tutti e tre i codici nel vostro modello, salvatelo premendo sul pulsante "Salva modello" e poi testatelo di persona per vedere se sia compatibile con il vostro blog.




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".