-
+4
.Creare un menu laterale statico a scorrimento in HTML e CSS
Creata da Alexander Cerutti
Clicca per andare all'esempio.Salve a tutti, benvenuti in un'altra delle mie guide! Quest'oggi non mi dilungherò più di tanto nell'introduzione in quando non c'è molto da dire se non che useremo il tag <nav> dell'HTML 5 e le classiche liste.
Situazione
Vogliamo creare un sito che avrà un menù come quello in figura sopra.
Procedura
Dotiamoci dei classici due fogli, index.html e style.css, il secondo già incluso nel primo.
Apriamo dentro <body> il tag <nav> (e lo chiudiamo anche) e inseriamo come primo elemento, il nostro logo (io inserisco quello di Syra). Quindi apriamo una lista non ordinata (<ul>), dentro la quale creeremo tanti elementi di lista (<li>).
Nota Bene: affinché tutto il pulsante singolo di una lista riporti ad un collegamento determinato, sarà necessario che il tag <a> contorni il tag <li>. Inoltre, il primo elemento della lista avrà la classe ".active".HTML<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<a href="#"><img id="logo" alt="logo" src="https://farm6.staticflickr.com/5565/15093842946_de52317ac2_o.png" width="240"></a>
<ul>
<a href="#"><li class="active">Home</li></a>
<a href="#"><li>Chi Siamo</li></a>
<a href="#"><li>La nostra missione</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Dona</li></a>
<a href="#"><li>Trovaci</li></a>
<a href="#"><li>Eventi</li></a>
<a href="#"><li>Crediti</li></a>
<a href="#"><li>Assistenza Tecnica</li></a>
<a href="#"><li>Noi Malati di Computer</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Altro</li></a>
<a href="#"><li>Altro</li></a>
</ul>
</nav>
</body>
</html>
Passiamo quindi alla definizione degli stili nel file CSS.
Definiamo lo stile di <nav>: necessiterà di essere fissato a destra in modo da occupare il 100% dell'altezza (position: fixed, left: 0, top: 0, bottom: 0). Visto che ci siamo, definiamo anche le proprietà per i collegamenti. Da ricordarsi è di definire la larghezza del menu stesso.CODICEnav {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 288px;
margin: 0;
padding: 0;
background: #E6E6E6;
color: #6C7482;
overflow-y: scroll;
}
nav a { text-decoration: none; color: #6C7482; }
Grazie a position: fixed e a overflow-y:scroll permetteremo al contenuto che sarà d'eccesso di rimanere sempre visibile con lo scroll del menu. Infatti overflow-y, rappresenta ciò che eccede (overflow) sull'asse verticale (y); come potete immaginare, esiste anche quello dell'asse x o quello generico rappresentante entrambi.
Definiamo quindi il logo: useremo padding-left (o margin-left, in questo caso è uguale) per posizionarlo al centro.CODICE#logo { padding-left: 20px; }
Quindi passiamo a definire prima le liste (e il menu generale <ul>), quindi la classe .active. Da notare che per poter far funzionare l'effetto che gli ho "installato", useremo lo pseudo-elemento :not() per escludere delle proprietà da determinate funzioni, ID o, in questo caso, classi. Lo useremo per escludere .active da determinate proprietà, ovvero transition, per l'animazione, e posizionamenti.CODICEnav ul {
width: 288px;
height: 100%;
padding: 0;
position: relative;
left: 0;
right: 0;
bottom: 0;
list-style-type: none;
}
nav ul li {
color: #000;
width: 258px;
height: 35px;
margin: 0;
padding-top: 10px;
padding-left: 20px;
padding-right: 0;
padding-bottom: 0;
left: 0;
right: 0;
position: relative;
}
nav ul li:not(.active) {
background: #E6E6E6;
transition: left 0.5s, background 1s, color 1s;
-webkit-transition: left 0.5s, background 1s, color 1s;
-moz-transition: left 0.5s, background 1s, color 1s;
border-left: 10px solid #21D561;
padding-top: 10px;
left: -10px;
}
Ed ecco la classe dedicata ad .active:CODICEnav ul li.active {
width: 258px !important;
border-top: 0!important;
border-left: 10px solid #21D561;
background: #3B383B;
color: #FFF;
}
E, per finire, applichiamo gli effetti :hoverCODICEnav ul a:hover {
color: #FFF;
}
nav ul a:hover > li:not(.active) {
background: #3B383B;
left: 0px;
color: #FFF;
}
Ed ecco completato!
Animazioni
Come funzionano le animazioni in questo caso? Semplice, ponendo in un elemento la proprietà transition e come suo(i) valore/i le proprietà CSS che vogliamo modificare e il tempo dell'animazione, quando ci sarà un evento (:hover, :active, :focus) che contiene quella proprietà che abbiamo specificato, quella si animerà. Oltre a questo, dopo i secondi è possibile inserire la tipologia di animazione, la quale, di default, è linear. Per ultimo, è possibile inserire un altro valore di tempo DOPO la tipologia di animazione, il quale specificherà il delay, ovvero il ritardo di inizio dell'animazione.
Spero che vi possa essere stata utile questa guida e alla prossima!
Buona creazione!
Edited by Alexander Cerutti - 7/9/2014, 01:45. -
.
Molto interessante, bravo!
. -
.
Grazie!
. -
Sonny Moore .
User deleted
Io di solito per includere gli stylesheet utilizzo il tag style cosi` la pagina ci mette di meno a caricarsi perche` non fa riferimento a nessun foglio esterno.
Comunque, guida interessante.. -
.Io di solito per includere gli stylesheet utilizzo il tag style cosi` la pagina ci mette di meno a caricarsi perche` non fa riferimento a nessun foglio esterno.
Comunque, guida interessante.
In realtà c'é poca differenza, il fatto é che se sono poche righe é meglio usare Style, altrimenti meglio usare il file separato Comunque grazie
. -
.
Ottimo, bravo!
. -
JS96 .
User deleted
Purtroppo su Windows viene visualizzata la scrollbar.
Quindi la cosa andrebbe fatta così:HTML<div style="overflow: hidden;">
<div style="overflow: auto;">
<!-- CONTENUTO -->
</div>
</div>. -
.Purtroppo su Windows viene visualizzata la scrollbar.
Quindi la cosa andrebbe fatta così:HTML<div style="overflow: hidden;">
<div style="overflow: auto;">
<!-- CONTENUTO -->
</div>
</div>
Contenuto, intendi la barra si?
Comunque, hai modo di fare uno screen prima e dopo?
Grazie!
Edited by eXander - 9/2/2016, 18:54. -
.Areon .
User deleted
Complimenti , sopratutto nel sistema hover (se ho visto bene) . . -
.
Grazie! Si effettivamente non si usa spesso il sistema :not(), ma è una buona cosa da usare. 
. -
.Areon .
User deleted
Grazie! Si effettivamente non si usa spesso il sistema :not(), ma è una buona cosa da usare.
Ah ecco che cos'era il Not() .
Cmq prego
...
. -
Emanuele8 .
User deleted
Ciao...bella guida.....il problema è che sul pulsante home rimane l'effetto come se fosse continuamente il puntatore del mouse su di lui...come posso fare? . -
Matteo65 .
User deleted
togli l' primaCODICE<a href"#">...</a>.
|
Contacts
Web
