Ultima modifica da un moderatore:
Creare uno Sroll Animation CSS
In questa guida vi illustrerò come fare a creare un menu molto usato nella navigazione mobile. Con il click sul pulsante del menù uscira dalla parte sinistra. Con un altro click verrà nuovamente chiuso.
Questo effetto è realizzato con la libreria jQuery.
Passiamo ora alla spiegazione di come realizzare e personalizzare tutto ciò:
| Modifica HTML |
HTML:
<!-- INIZIO CONTAINER MENU -->
<div id="contentmenu">
<!-- Inizio Menu -->
<div id="out" style="display: none;">
<ul>
<a href="#"><li>LINK1</li></a>
<a href="#"><li>LINK2</li></a>
<a href="#"><li>LINK3</li></a>
<a href="#"><li>LINK4</li></a>
</ul>
</div>
<!-- Fine Menu -->
<!-- Inizio Pulsante -->
<div id="menu">
<span class="entypo-menu"></span>
</div>
<!-- Fine Pulsante -->
</div>
<!-- FINE CONTAINER MENU -->Per modificare i link del menù sostituire # con il link vero e proprio e "LINK1", "LINK2" ecc.. con il titolo che volete far comparire. Ne potete aggiungere quanti volete.
HTML:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>Ricordatevi di inserire la libreria jQuery con questo script all'interno dei tag <head></head>.
| Modifica CSS |
Potete trovare tutto il file CSS a questo link.
Le uniche modifiche che potete apportare sono il cambio di colore.
Codice:
#menu{
width: 40px;
height: 40px;
background: #08cbc4; /* Cambiare qui il colore del PULSANTE */
cursor: pointer;
box-shadow: 1px 2px 1px 0px #007D78;
color: #ffffff;
text-align: center;
font-size: 35px;
margin: 15px;
float:left;
}
#out {
width: 250px;
height: 100vh;
background: #08cbc4; /* Cambiare qui il colore del MENU */
float:left;
}| Modifica JS |
Codice:
<!-- Funzione Open/Close -->
<script>
$( "#menu" ).click(function() {
$( "#out" ).toggle( "fast" );
});
</script>FUNZIONA OVVIAMENTE ANCHE PER MOBILE.
Spero la guida vi sia piaciuta, per qualsiasi dubbio o domanda resto a disposizione.
Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|
