Menu a tendine a comparsa con sottosezioni per blogger

Scriptiny.com mette a disposizione un fantstico menu con tendine a comparsa utilissimo a semplificare la consultazione, da parte dei lettori, delle varie sottosezioni del blog.
Clicca qui per visualizzare una demo del menu


A seguire vedremo come integrare questo menu su blogger e le possibili personalizzazioni.

Accediamo a blogger e andiamo in Design -> Modifica HTML.
Salviamo una copia del templete.

Inseriamo il css per il menu cercando nel codice la scritta </head> e subito prima incolliamo il seguente codice:

<!--TinyDropDownMenu Inizio-->
<style>
* {margin:0; padding:0; outline:0}
body {font:11px Verdana,Arial; color:#000000; background:#ffffff}
.nav {height:36px; background:#aaaaaa; color:#ffffff; text-shadow:1px 1px #888888; z-index:1000}
.menu a {float:left; color:#eeeeee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu span {float:left; color:#eee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu a:hover {color:#fff}
.menu {list-style:none; font:16px Arial,Verdana; text-align:center; width:600px; margin:0 auto}
.menu li {position:relative; float:left; width:120px; z-index:1000}
.menu ul {display:none; position:absolute; font:normal 13px Arial,Verdana; top:36px; left:0; background:#aaaaaa; display:none; list-style:none}
.menu ul li {float:none; border-top:1px solid #ccc; width:120px}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999999; color:#ffffff}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul ul {left:120px; top:0}
.menu li.submenu {font-weight:bold}
.menu li.noborder {border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#ffffff; background:#999999}
li.menuhover span, li.menuhover li.menuhover span {color:#ffffff; background:#999999}
#info {width:180px; background:#eeeeee}
#info li {width:160px; border-top:none; padding:8px 10px; color:#666666; text-shadow:1px 1px #fff; text-align:left}
</style>
<script src='https://sites.google.com/site/scriptperilblog/menu/tinydropdown.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/ScaLK' target='_blank'><span style='font-size: x-small;'>TinyDropdown Menu</span></a></noscript>
<!--TinyDropDownMenu Fine -->

Le principali modifiche da apportare sono:

• La larghezza del menu qui impostata a 600px;
• La larghezza di ogni voce del menu impostata a 120px;
• La larghezza del menù più a destra che può essere utilizzato per inserire delle informazioni è di 160px e la tendina che appare di 180px;
• Il colore di sfondo del menù è #aaaaaa;
• Il colore di sfondo all'hover (passaggio) del mouse è #999999;
• Il colore del testo dei titoli è #fffff;
• Il colore del testo nei sottomenu è #666666;
• Il colore di sfondo delle sottosezioni è #eeeeee;
• Il colore di ombreggiatura è #888888;

Modifichiamo i colori e le larghezze dei blocchi in maniera tale da ben integrare il menù all'interno dei nostro blog.

Cercate di adattore colori già presenti nel layout e salvate il modello.

Qui la tavola dei colori esadecimali http://it.wikipedia.org/wiki/Aiuto:Tavolozza_dei_colori.

Attenzione a non aumentare la grandezza del font altrimenti dovremo modificare lo script e i vari padding.

A questo punto possiamo ricercare all'interno del codice una posizione determinata per inserire il menu, oppure andare in Elementi Pagina e aggiungere un gadjet HTML/Javascript e posizionarlo, in base al layout in alto o sopra il corpo dei post.



All'interno del gadget incolliamo il seguente codice:

<div class="nav">
  <ul id="menu" class="menu">
    <li class="nodiv"><a href="#">HOME</a></li>
    <li>
      <a href="#">ITEM 1</a>
      <ul>
        <li><a href="#">Submenu 1.1</a></li>
        <li><a href="#">Submenu 1.2</a></li>
        <li class="submenu">
          <a href="#">MORE</a>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span>ITEM 2</span>
      <ul>
        <li><a href="#">Submenu 2.1</a></li>
        <li><a href="#">Submenu 2.2</a></li>
        <li><a href="#">Submenu 2.3</a></li>
        <li class="submenu">
          <span>MORE</span>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
            <li><a href="#">More 4</a></li>
            <li><a href="#">More 5</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 2.5</a></li>
        <li><a href="#">Submenu 2.6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">ITEM 3</a>
      <ul>
        <li><a href="#">Submenu 3.1</a></li>
        <li><a href="#">Submenu 3.2</a></li>
        <li><a href="#">Submenu 3.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">INFO</a>
      <ul id="info">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo nulla, malesuada in porta vitae, fermentum ac nulla. </li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'}); </script>

Non resta che riadattare il menu in base alle nostre necessità, aggiungere o rimuovere sezioni.
Sostituire i titoli dei menu ed inserire i collegamenti dove è riportato #.

Per qualsiasi dubbi o domanda non esitare a contattarmi.

SHARE SHARE SHARE

Clo&demk

Siamo due semplici ragazzi Clo e Demk abitiamo in diverse città, ma il PC e gli interessi comuni ci legano. Ci piace la musica e i video musicali, navigare nel vasto mare d'informazioni d'internet alla ricerca di nuove mete diverse e lontane e non ci spaventano gli ostacoli...(Continua).

• 
• 
• 
• 
•