Qualche tempo fa ho parlato del fantastico menu in jquery, Superfish, che comunque consiglio per l’estrema facilità di implementazione e di utilizzo. Tuttavia, oggi voglio dimostrarvi come sia possibile creare un menu harmonium e un menu dropdown senza il minimo utilizzo di javascript, eppure con gli stessi effetti tipici del javascript (e in particolare di jQuery).
Parliamo naturalmente di tecniche correlate al CSS3, e dunque non pienamente compatibile con i browser datati, salvo non si vogliano adottare tecniche che permettano anche a questi browser di riconoscere gli standard del CSS3. Il che significa utilizzare javascript, cosa che vogliamo evitare.
Fortunatamente tutti i browser di ultima generazione hanno in dotazione gli standard CSS3 e dunque è interessante vedere cosa si può fare con questo standard.
Menu Harmonium
Creiamo prima di tutto la nostra lista in html:<div id="listmenu">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</div>
A questo punto solo CSS:
#listmenu ul, #listmenu li {
list-style-type: none;
padding: 0;
margin: 0;
}
#listmenu li {
height: 30px;
width: 200px;
background: red;
border: 1px solid #900;
-webkit-transition: all 0.18s ease-out;
-moz-transition: all 0.18s ease-out;
-ms-transition: all 0.18s ease-out;
-o-transition: all 0.18s ease-out;
transition: all 0.18s ease-out;
}
#listmenu li:hover {
height: 100px;
}
#listmenu li a {
color: #000;
}
#listmenu li a:hover {
color: #ffe;
}
Il risultato lo potete vedere su jsfiddle.
Menu Drop Down
Qui la questione si fa più interessante. Un menu tipo Superfish, ma senza jQuery o javascript. Solo puro CSS. L’html:
<div id="listmenu2"> <ul class="menu"> <li class="submenu"><a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 11</a></li> <li><a href="#">Submenu 12</a></li> <li><a href="#">Submenu 13</a></li> <li><a href="#">Submenu 14</a></li> <li><a href="#">Submenu 15</a></li> </ul> </li> <li class="submenu"><a href="#">Menu 2</a> <ul class="children"> <li class="submenu"><a href="#">Submenu 21</a> <ul class="children"> <li><a href="#">Submenu 211</a></li> <li><a href="#">Submenu 212</a></li> <li><a href="#">Submenu 213</a></li> <li class="submenu"><a href="#">Submenu 214</a> <ul class="children"> <li><a href="#">Submenu 2111</a></li> <li><a href="#">Submenu 2121</a></li> <li><a href="#">Submenu 2131</a></li> <li><a href="#">Submenu 2141</a></li> <li><a href="#">Submenu 2151</a></li> </ul> </li> <li><a href="#">Submenu 215</a></li> </ul> </li> <li><a href="#">Submenu 22</a></li> <li><a href="#">Submenu 23</a></li> <li><a href="#">Submenu 24</a></li> <li><a href="#">Submenu 25</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> </ul> </div>E ora il CSS:
/* general */
#listmenu2 {
min-height: 30px;
height: auto;
width: 100%;
}
#listmenu2 ul, #listmenu2 li {
list-style-type: none;
padding: 0;
margin: 0;
}
#listmenu2 li {
min-width: 150px;
text-align: center;
line-height: normal;
font-family: arial;
font-weight: bold;
font-size: 14px;
}
#listmenu2 li a {
display: block;
line-height: 200%;
height: 30px;
-webkit-transition: all 0.18s ease-in-out;
-moz-transition: all 0.18s ease-in-out;
-ms-transition: all 0.18s ease-in-out;
-o-transition: all 0.18s ease-in-out;
transition: all 0.18s ease-in-out;
text-decoration: none;
color: #900;
}
#listmenu2 li a:hover {background: #eee;}
/* arrow */
#listmenu2 ul li.submenu li a:before,
#listmenu2 ul li.submenu li.submenu li a:before,
#listmenu2 ul li.submenu li.submenu li.submenu li a:before {
content: "";
}
#listmenu2 ul li.submenu a:before,
#listmenu2 ul li.submenu li.submenu a:before,
#listmenu2 ul li.submenu li.submenu li.submenu a:before{
content: "\27A5";
position: absolute;
right: 3px;
top: 0;
}
/* float first li */
#listmenu2 ul.menu > li {
float: left;
display: inline-block;
height: 30px;
position: relative;
background: #EEE;
margin-right: 20px;
}
/* deep one */
#listmenu2 ul.menu li ul {
opacity: 0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
margin-left: -9999px;
}
#listmenu2 ul.menu li ul {
position: absolute;
top: 30px;
left: 0;
background: #aaa;
width: 100%;
display: block;
z-index: 9999;
}
#listmenu2 ul.menu li:hover ul {
opacity: 1;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
margin-left: auto;
}
#listmenu2 ul.menu li ul li,
#listmenu2 ul.menu li ul li ul li {
position: relative;
}
/* deep two */
#listmenu2 ul.menu li ul ul,
#listmenu2 ul.menu li:hover ul ul{
left: 150px;
opacity: 0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
top: 0;
}
#listmenu2 ul.menu li ul li:hover ul {
opacity: 1;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
/* deep three */
#listmenu2 ul.menu li ul ul ul,
#listmenu2 ul.menu li:hover ul ul ul {
left: 150px;
opacity: 0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
top: 0;
}
#listmenu2 ul.menu li:hover ul ul li:hover ul {
opacity: 1;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
Il risultato lo potete vedere su jsfiddle.
Niente javascript. Solo CSS3. Il che a tutto vantaggio della velocità delle nostre pagine web, seppure passeranno ancora parecchi anni prima che si potranno implementare tecniche che eguaglino perfettamente e pienamente quelle oggi disponibili tramite javascript e in particolare le varie librerie jQuery, Mootools ecc.