codice:
.nav {
/* largezza libera, potrai sperimentare */
width: 320px;
min-width: 320px;
/* fissiamo e indichiamo l'altezz massimale */
height: 100%;
position: fixed;
top: 0;
bottom: 0;
margin: 0;
/* spostiamo(nscondiamo)il pannello rispetto bordo sinistro della pagina */
left: -320px;
/* spazi interni */
padding: 15px 20px;
/* regoliamo la uscita del panello */
-webkit-transition: left 0.3s;
-moz-transition: left 0.3s;
transition: left 0.3s;
/* indichiamo il colore dello sfondo del panello */
background: #c5ad39;
background-image: url(logopalermomenu.png);
/* indichiamo che sara sopra tutti gli altri elementi della pagina */
z-index: 2000;
}
/**
* Bottone interruttore del pannello
* tag <label>
*/
.nav-toggle {
/* posizionamento assoluto*/
position: absolute;
/* spazio rispetto bordo sinistro del pannello */
left: 320px;
/* rispetto bordo superiore */
top: 1em;
/* spazzi interni */
padding: 0.5em;
/* indichiamo il colore dello sfondo del interruttore
* di solito corrisponde al colore del pannello
*/
background: inherit;
/* colore del testo */
color: #040404;
/* tipo del cursore */
cursor: pointer;
/* altezza del font */
font-size: 1.1em;
line-height: 1;
/* sempre in prima vista rispetto altri elementi della pagina */
z-index: 2001;
/* animazione del colore del testo al hover */
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
}
/* identifichiamo l'aspetto del bottone interruttore
* simbolo Unicode (TRIGRAM FOR HEAVEN)
*/
.nav-toggle:after {
content: '\2630';
text-decoration: none;
}
/* colore del testo al hover */
.nav-toggle:hover {
color: #f7e1e4;
}
/**
* Checkbox nascosto
* invisibile e inaccessibile
* nome del selettore del attributo del checkbox
*/
[id='nav-toggle'] {
position: absolute;
display: none;
}
/**
* cambiamento della posizione del interutore
* in caso di dispositivi mobili
* quando panello aperto si trova al interno del panello */
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
left: auto;
right: 2px;
top: 1em;
}
/**
* Quando checkbox selezionato, aprire panello
* usiamo pseudo-classe :checked
*/
[id='nav-toggle']:checked ~ .nav {
left: 0;
box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
-moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
-webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
overflow-y: auto;
}
/*
* spostamento del contenuto della pagina
* per largezza del panelo ,
* non e obbligatorio il trucco, ma puoi sempre usarlo
*/
[id='nav-toggle']:checked ~ main > article {
-webkit-transform: translateX(320px);
-moz-transform: translateX(320px);
transform: translateX(320px);
}
/*
* cambio simbolo del bottone interruttore ,
* solita croce (MULTIPLICATION X),
* potrai utilizare qualsiasi altro simbolo
*/
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
content: '\2715';
}
/**
* prefissi per Android <= 4.1.2
*
*/
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
to {
padding: 0;
}
}
/**
* per dispositivi medie e piccoli
*/
@media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
}
@media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
}
/**
* Decoriamo il menu
* usando la lista non numerata per le voci
* aggiungiamo passaggi e trasformazioni
*/
.nav > ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.nav > ul > li {
line-height: 2.5;
opacity: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
-moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
-ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
transition: opacity .5s .1s, transform .5s .1s;
}
[id='nav-toggle']:checked ~ .nav > ul > li {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
/* impostiamo intervalli di apparizone dei voci del menu */
.nav > ul > li:nth-child(2) {
-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
transition: opacity .5s .2s, transform .5s .2s;
}
.nav > ul > li:nth-child(3) {
-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
transition: opacity .5s .3s, transform .5s .3s;
}
.nav > ul > li:nth-child(4) {
-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
transition: opacity .5s .4s, transform .5s .4s;
}
.nav > ul > li:nth-child(5) {
-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
transition: opacity .5s .5s, transform .5s .5s;
}
.nav > ul > li:nth-child(6) {
-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
transition: opacity .5s .6s, transform .5s .6s;
}
.nav > ul > li:nth-child(7) {
-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
transition: opacity .5s .7s, transform .5s .7s;
}
/**
* decoriamo voci del menu
*/
.nav > ul > li > a {
display: inline-block;
position: relative;
padding: 0;
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 0.9em;
color: #040404;
width: 100%;
text-decoration: none;
/* passagio morbido */
-webkit-transition: color .5s ease, padding .5s ease;
-moz-transition: color .5s ease, padding .5s ease;
transition: color .5s ease, padding .5s ease;
}
/**
* stato dei link al passaggio del mouse
*/
.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
color: #f7e1e4;
padding-left: 50px;
}
/**
* sottolineatura dei link del menu
*/
.nav > ul > li > a:before {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: 100%;
-webkit-transition: width 0s ease;
transition: width 0s ease;
}
.nav > ul > li > a:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: #f7e1e4;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
/**
* animazione delle linea di sottolineatura al hover
*/
.nav > ul > li > a:hover:before {
width: 0%;
background: #040404;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
.nav > ul > li > a:hover:after {
width: 0%;
background: #040404;
-webkit-transition: width 0s ease;
transition: width 0s ease;
}
/* lo sfondo oscurante della pagina
* in questo caso ellementi vengono blocati */
.mask-content {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
}
[id='nav-toggle']:checked ~ .mask-content {
visibility: visible;
opacity: 1;
-webkit-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s;
}
Aiutatemi please
Rispondi quotando
