Quando utilizziamo le transizioni CSS con lo pseudo-elemento :target
creiamo un effetto unidirezionale, nel senso che la
transizione termina e non può essere reinizializzata in senso opposto in quanto il browser ha già aggiunto l'ancora all'URL della pagina.
Vediamo una soluzione.
Abbiamo un menu con un pulsante:
<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="opener">
<a href="#navigation" class="icon-gear"></a>
</div>
</div>
Gli stili CSS importanti sono i seguenti:
#navigation {
height: 3em;
width: 18em;
color: #fff;
position: fixed;
top: 50%;
margin-top: -1.5em;
left: -18em;
-moz-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
#navigation:target {
left: 0;
}
Quando clicchiamo sul pulsante viene aggiunta una nuova entry alla cronologia del browser. Sfruttando la cronologia possiamo invertire la transizione CSS:
var handleMenu = function() {
var menu = document.getElementById('navigation'),
opener = document.getElementById('opener'),
button = opener.getElementsByTagName('a')[0];
button.addEventListener('click', function() {
var left = window.getComputedStyle(menu, null).getPropertyValue('left');
if(parseInt(left) == 0) {
history.back();
} else {
history.forward();
}
}, false);
};
document.addEventListener('DOMContentLoaded', function() {
handleMenu();
}, false);
Rimuovendo o aggiungendo l'ancora all'URL della pagina otteniamo l'effetto desiderato.