Menù colorato ruotante per Blogger e altre piattaforme.

Il codice di un menù colorato ruotante in HTML5 che può essere installato in tutte le piattaforme di blogging.

Ho già presentato dei menù che utilizzano il tag <nav> che fa parte del nuovo linguaggio HTML5 come il nuovo menù che vado a illustrare in questo post che però ha la peculiarità di essere vivace e colorato. Probabilmente non è adatto a un sito particolarmente serio ma è sicuramente una alternativa per blog che fanno dell'originalità il loro punto di forza. Si tratta di cinque elementi per una larghezza complessiva di 640 pixel ma che ovviamente possono essere aumentati aumentando la larghezza totale del menù o diminuendo quella di ciascun elemento configurata a 100 pixel.

Quando il cursore di un navigatore passerà sopra a un elemento del menù ci sarà una rotazione dello stesso in senso orario che poi ritornerà alla posizione originale quando il mouse si sposterà.

Per l'installazione non occorre modificare il template. Si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla il seguente codice

<style type='text/css'>
nav {
        width: 640px;
        height: 100px;
        margin: 120px auto;
        text-align: center;
}
.top-menu li {
        display: inline-block;
        text-align: center;
        margin: 30px 5px;
        position: relative;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
}
.top-menu li:hover {
        margin: 30px 20px;
}
.top-menu li:active {
        margin: 30px 33px;
}
.top-menu li a  {
        width: 100px;
        height: 100px;
        z-index: 9999;
        position: absolute;
        top: 35px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
}
.top-menu li:active a {
        font-size: 26px;
        top: 30px;
        text-shadow: none;
}
.top-menu li div.menu-item {
        width: 100px;
        height: 100px;
        display: block;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-border-top-left-radius: 100px;
        -webkit-border-bottom-right-radius: 100px;
        -moz-border-radius-topleft: 100px;
        -moz-border-radius-bottomright: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
        -webkit-border-top-left-radius: 80px;
        -webkit-border-bottom-right-radius: 80px;
        -moz-border-radius-topleft: 80px;
        -moz-border-radius-bottomright: 80px;
        border-top-left-radius: 80px;
        border-bottom-right-radius: 80px;
                -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
        -webkit-border-top-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#prodotti { background: #E42B2B;}
#prezzi { background: #ff8400; }
#about { background: #a800ff; }
#contatti { background: #49a7f3; }
</style>
<nav>
<ul class="top-menu">
<li><a href='#'>Home</a><div class="menu-item" id="home"></div></li>
<li><a href='#'>Prodotti</a><div class="menu-item" id="prodotti"></div></li>
<li><a href='#'>Prezzi</a><div class="menu-item" id="prezzi"></div></li>
<li><a href='#'>About</a><div class="menu-item" id="about"></div></li>
<li><a href='#'>Contatti</a><div class="menu-item" id="contatti"></div></li>
</ul>
</nav>

La rotazione ha una durata di 0.3 secondi e può essere velocizzata o rallentata. Il menù si posiziona al centro del layout (text-align: center) e ho colorato i parametri più importanti da modificare. Ciascun elemento ha un suo particolare selettore che ne determina il colore di sfondo (leggi il post sui codici dei colori).  Per esempio la riga

<li><a href='#'>Prodotti</a><div class="menu-item" id="prodotti"></div></li>

determina la voce Prodotti con CSS

#prodotti { background: #E42B2B;} con #E42B2B; come suo codice del colore

Per inserire o per modificare un elemento va quindi modificato anche il corrispondente CSS oppure crearne un altro con la stessa sintassi. Per collegare una pagina o un post a una voce del menù basta incollarne l'URL al posto del cancelletto ( # )in questo modo

<li><a href='URL_PAGINA_PREZZI'>Prezzi

Nella demo si vedono dei bordi rossi tratteggiati sotto il menù al passaggio del mouse. Si tratta di una particolarità del vecchio modello che ho usato come test e che non ha nulla a che vedere con il codice del menu.  Questo menù può essere installato anche in altre piattaforme visto che non ha alcun tag di Blogger.