Blogger Book

Il menu orizzontale con ricerca integrata sembra essere uno dei preferiti da molti blogger. Si tratta di una variante: un menu orizzontale con sotto-schede e un motore di ricerca che si espande al passaggio del mouse , coprendo quasi l'intera larghezza del menu. Potete vederlo in azione su questo blog di prova .

Questo menu è realizzato interamente in CSS, quindi non dovrete preoccuparvi della libreria di script o della compatibilità con i browser, poiché funziona perfettamente con tutte le ultime versioni.
Abbiamo anche ottenuto l'effetto espandibile con CSS, ed è semplice: abbiamo semplicemente impostato la larghezza della barra di ricerca a 0px nello stato normale, per poi aumentarla quando il cursore ci passa sopra. Un gioco da ragazzi, vero? ;)

ATTENZIONE: se stai utilizzando un modello Blogger originale, devi prima seguire i passaggi descritti in questo post , altrimenti il menu potrebbe non essere visualizzato o funzionare correttamente.

Per inserire questo menu sul tuo blog, vai all'edizione HTML del tuo modello e prima di ]]></b:skin> incolla gli stili CSS:

#menuSearcher {
position: relative;
width: 95%; /* Larghezza del menu */
altezza: 40px;
padding-left: 14px;
background: #CC2A41; /* Colore di sfondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top { display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Colore del titolo */
text-decoration:none;
font-size:14px; /* Dimensione del carattere */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
altezza:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
altezza:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; Italiano: z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul {posizione:assoluta; sinistra:-9999px; cima:-9999px; larghezza:0; altezza:0; margine:0; padding:0; stile elenco:none;} .menusearch li:hover ul.sub { sinistra:0; cima:40px; sfondo:#351330; /* Colore di sfondo del sottomenu */ padding:3px; spazio bianco:nowrap;

larghezza:200px;
altezza:self;
indice z:3;
}
.menusearch li:hover ul.sub li {
display:block;
altezza:30px;
posizione:relativa;
float:left;
larghezza:200px;
peso del carattere:normale;
}
.menusearch li:hover ul.sub li a{
display:block;
altezza:30px;
larghezza:200px;
altezza della riga:30px;
rientro del testo:5px;
colore:#fff;
dimensione del carattere:14px;
decorazione del testo:nessuno;
}
.menusearch li ul.sub li a.fly {
/* Colore di sfondo del sottomenu */
background:#351330 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0 Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Colore di sfondo al passaggio del mouse */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Colore di sfondo al passaggio del mouse */
background:#CC2A41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0 Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 185px 10px no-repeat; colore:#fff;}
.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
sinistra:200px;
alto:-4px;
sfondo: #351330; /* Colore di sfondo del sottomenu */
padding:3px;
white-space:nowrap;
larghezza:200px;
indice z:4;
altezza:self;
}
#search input[type="text"] {
sfondo: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0Rcza6n4olln0t1-PfvyEZKithvhF6Btv6EgdTcK2a-uA v7wc7oVJFN0et6MFMxZbO0TXyvNhZD771h6LOdBdRwnyLgEnwwOW6iX4NBNS2i4hRA1sFBJ_ESRuSoly192F1IDY-PVcjk/s32/search.png) no-repeat centro sinistra;
posizione: assoluta;
destra:3px; /* Distanza del Finder da destra */
contorno:none;
dimensione carattere: 13px; /* Dimensione carattere del Finder */
colore: #ccc;
larghezza: 0;
margine: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
bordo: 1px solido #fff;
-webkit-transition: tutti gli 0,5s di ease-in-out;
-moz-transition: tutti gli 0,5s di ease-in-out;
-o-transition: tutti gli 0,5s di ease-in-out;
-ms-transition: tutti gli 0,5s di ease-in-out;
transizione: tutti gli 0,5s di ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Larghezza del motore di ricerca quando espanso */

 

Quindi, in Progettazione, crea un gadget HTML/Javascript e incolla lì quanto segue:

<div id='menuSearch'>
<ul class='menusearch'>
<li class='top'> <a class='top_link' href=' URL collegamento '> <span> Scheda 1 </span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'> Scheda 2 </span></a><ul class='sub'><li><a class='fly' href='#'> Scheda 2.1 </a><ul>
<li> <a href=' URL collegamento '> Scheda 2.1.1 </a></li>
<li> <a href=' URL collegamento '> Scheda 2.1.2 </a></li>
<li> <a href=' URL collegamento '> Scheda 2.1.3 </a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'> Scheda 2.2 </a>
<ul>
<li> <a href=' Link URL '> Scheda 2.2.1 </a></li>
<li> <a href=' Link URL '> Scheda 2.2.2 </a></li>
<li> <a href=' Link URL '> Scheda 2.2.3 </a></li>
<li><a class='fly' href='#'> Scheda 2.2.4 </a>
<ul>
<li> <a href=' Link URL '> Scheda 2.2.4.1 </a></li>
<li> <a href=' Link URL '> Scheda 2.2.4.2 </a></li>
<li> <a href=' Link URL '> Scheda 2.2.4.3 </a></li>
</ul>
</li>
<li> <a href=' Link URL '> Scheda 2.2.5 </a></li>
<li><a class='fly' href='#'> Scheda 2.2.6 </a>
<ul>
<li> <a href=' Link URL '> Scheda 2.2.6.1 </a></li>
<li> <a href=' Link URL '> Scheda 2.2.6.2 </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href=' Link URL '> Scheda 2.3 </a></li>
<li> <a href=' Link URL link '> Scheda 2.4</a></li>
<li> <a href='Link URL'> Scheda 2.5 </a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'> Scheda 3 </span></a>
<ul class='sub'>
<li> <a href='Link URL'> Scheda 3.1 </a></li>
<li> <a href=' Link URL '> Scheda 3.2 </a></li>
<li> <a href=' Link URL '> Scheda 3.3 </a></li>
<li> <a href=' Link URL '> Scheda 3.4 </a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'> Scheda 4 </span></a>
<ul class='sub'>
<li> <a href=' Link URL '> Scheda 4.1 </a></li>
<li><a class='fly' href='#'> Scheda 4.2 </a>
<ul>
<li> <a href=' Link URL '> Scheda 4.2.1 </a></li>
<li> <a href=' Link URL '> Scheda 4.2.2 </a></li>
<li> <a href=' Link URL '> Scheda 4.2.3 </a></li>
<li> <a href=' Link URL '> Scheda 4.2.4 </a></li>
<li> <a href=' Link URL '> Scheda 4.2.5 </a></li>
<li> <a href=' Link URL '> Scheda 4.2.6 </a></li>
</ul>
</li>
<li> <a href=' Link URL '> Scheda 4.3 </a></li>
<li> <a href=' Link URL '> Scheda 4.4 </a></li>
<li> <a href=' Link URL '> Scheda 4.5 </a> </li>
<li> <a href=' Link URL '> Scheda 4.6 </a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'> Scheda 5 </span></a>
<ul class='sub'>
<li> <a href=' Link URL '> Scheda 5.1 </a></li>
<li> <a href=' Link URL '> Scheda 5.2 </a></li>
<li> <a href=' Link URL '> Scheda 5.3 </a></li>
</ul>
</li>
</ul>
<!-- Motore di ricerca -->
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Cerca...";' onfocus='if (this.value == "Trova...") this.value = "";' dimensione='28' tipo='testo' valore='Cerca...'/></form>
</div>

Ora non ti resta che salvare le modifiche. Il primo codice riguarda gli stili. Vedrai in verde dove potrai modificare i colori, i font, ecc. e l'aspetto del menu. Gli URL e i nomi delle tue schede e sotto-schede sono in rosso

. Prima di <!-- Search --> puoi aggiungere altre schede. Ad esempio, se desideri aggiungere un'altra scheda semplice, aggiungi una riga come questa:

<li class="top"> <a href=" URL collegamento " class="top_link"> <span> Scheda </span></a></li>

Se vuoi aggiungere una scheda con sotto-schede, aggiungi questo codice:

<li class="top"><a href="#" class="top_link"><span class="down"> Scheda </span> </a>
<ul class="sub">
<li><a href="Link URL">Scheda secondaria</a></li>
<li> <a href=" Link URL "> Scheda secondaria </a></li>
<li> <a href=" Link URL "> Scheda secondaria </a></li>
</ul>
</li>

E se vuoi che una delle sotto-schede abbia altre sotto-schede, elimina una riga come quella in arancione e modificala in un codice come questo:

<li><a href="#" class="fly"> Sotto-scheda </a>
<ul>
<li> <a href=" Link URL "> Un'altra sotto-scheda </a></li>
<li> <a href=" Link URL "> Un'altra sotto-scheda </a></li>
<li> <a href=" Link URL "> Un'altra sotto-scheda </a></li>
</ul>
</li>

Ecco fatto, meno complicato di quanto sembri. È sicuramente un menu da considerare, non solo per l'attrattiva del motore di ricerca, ma anche per la possibilità di aggiungere sotto-schede senza bisogno di script. Inoltre, possiamo personalizzarlo a nostro piacimento.

fonte