Back to home page
Il Jester
My little dream is in developing

Dropdown menu e Harmonium menu in puro CSS3, senza javascript

web-design-1366344_960_720Qualche 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.

E' un post utile?00