AS
CSS Menù
In questo esempio di menù a scomparsa sfrutto la funzionalità CSS transition-duration applicata agli stili visibile e nascosto del menù. Il secondo è posizionato esternamente al container ed ha un valore di opacity pari a zero. È importante che il container abbia la proprietà overflow impostata a hidden.
Lo switch fra le due classi è affidato al metodo Javascript className.
HTML
<div id="open_menu_id">Click here</div>
<div class="container">
<div id="menu_id" class="menu_hidden">
<div class="menu_item">Voce1</div>
<div class="menu_item">Voce2</div>
<div class="menu_item">Voce3</div>
<div class="menu_item">Voce4</div>
<div class="menu_item">Voce5</div>
<div class="menu_item">Voce6</div>
</div>
</div>
CSS
.container{
position:relative;
width:100%;
min-height:100%;
height:auto;
overflow:hidden;}
.menu{
position:absolute;
left:0;
width:60%;
opacity:1;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;}
.menu_hidden{
position:absolute;
z-index:-1;
left:-60%;
width:60%;
opacity:0;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;}
Javascript
function openMenu()
{
document.getElementById("menu_id").className="menu";
document.getElementById("open_menu_id").removeEventListener("click", openMenu);
document.getElementById("open_menu_id").addEventListener("click", closeMenu);
}
function closeMenu()
{
document.getElementById("menu_id").className="menu_hidden";
document.getElementById("open_menu_id").removeEventListener("click", closeMenu);
document.getElementById("open_menu_id").addEventListener("click", openMenu);
}
document.getElementById("open_menu_id").addEventListener("click", openMenu);
Visual explanation
Visible area
Click here
Voce1
Voce2
Voce3
Voce4
Voce5
Voce6