Conoscenze necessarie: html, css, css3
Richiesti: Conoscenza html e css
Tempo di progettazione: 30 minuti
Salve a tutti!!
Finalmente dopo una pausa durata decisamente troppo causa lavoro riesco a riprendere a scrivere gli articoli. Oltre a questo sono riuscito anche a trovare il tempo necessario per ultimare il mio sito e riordinare il codice di questo blog, quindi state connessi in quanto in questi giorni provvederò a mettere online tutto quanto! Ora basta chiacchere.. via con un nuovo articolo!
Menu dropdown
I menù dropdown o menù a tendina sono molto utilizzati nei siti in cui ci sono molte pagine dove l’utente può navigare. Chi è alle prime armi nel webdesign sicuramente troverà difficile realizzarne uno e spero che con questa guida potrà risolvere alcune lacune.
Codice di base
Per prima cosa prepariamo una cartella (mettete il nome che volete) e all’interno ci mettiamo due file:
- index.html
- style.css
Apriamo il file html con l’editor che preferite e iniziamo a riempirlo con questo codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS DropDown Menu</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
</body>
</html>Il codice appena postato è una semplicissima base di una pagina html.
Fatto questo apriamo passiamo al file css. In questo file metteremo tutto il codice che ci permetterà di realizzare il menù dropdown. In questo articolo nello specifico illustrerò vari esempi fino all’utilizzo dei css3.
Il codice html interno al body cambierà con i vari esempi.
Semplice menù dropdown
Il seguente codice permetterà di realizzare un semplicissimo menù a tendina. Vediamo il codice html:
<div id="drop-menu">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Work 1</a></li>
<li><a href="#">Work 2</a></li>
<li><a href="#">Work 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Non credo servano spiegazioni in merito al codice html postato. Come si può notare è una semplice lista non ordinata. Ora passiamo al codice css
body{
font-size:100%;
color:#333;
font-family:sans-serif;
}
/*container*/
#drop-menu {
margin: 0 auto;
padding: 0;
width: 960px;
}
/*menu*/
ul#menu {
margin:60px 0 0;
padding: 0;
list-style: none;
float:left;
width: 960px;
background-color: #111;
font-size:80%
}
ul#menu li {
margin:0;
padding:0;
float:left;
display: block;
border-right: 1px solid #222;
position: relative;
}
ul#menu li a {
float: left;
padding:12px 30px;
color: #fff;
text-transform: uppercase;
text-decoration:none;
}
ul#menu li a:hover {
background: #666;
color:#fff
}
ul#menu ul {
margin:2px 0 0;
padding:0;
display:inline-block;
list-style: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index:9999;
background: #444;
}
ul#menu li:hover ul {
opacity: 1;
visibility: visible;
}
ul#menu ul li {
float: none;
display: block;
border: 0;
}
ul#menu ul a {
padding:10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
ul#menu ul a:hover {
background-color: #0186ba;
color:#fff
}Per prima cosa formatto velocemente la lista e quindi l’elemento <ul> togliendo i pallini con list-style:none per poi passare all’elemento <li> utilizzando come proprietà il float e il relativo valore left. La lista però, in questo caso è composta da delle sottoliste e quando si visualizza il menù quest’ultime devono essere nascoste. Per queste tutorial ho voluto utilizzare la proprietà visibility applicato agli elementi <ul> interni alla prima lista. A questi elementi ho applicato visibility:hidden che permette di nascondere gli elementi fino a quando non passiamo con il mouse sopra ad una voce e rendiamo nuovamente visibili questi elementi.
Per posizionare gli elementi invece ho utilizzato la proprietà position con il valore absolute. Ricordo che il valore absolute deve avere un corrispettivo valore relative nel genitore degli elementi altrimenti gli elementi faranno capo al body in quanto è lui l’elemento relativo di default. Nel nostro caso il position:relative va applicato all’elemento <li>.
Un’altra cosa importante è la larghezza dell’elemento a all’interno delle sottoliste. Impostando una larghezza è possibile avere i blocchi tutti uguali fra di loro. Inoltre come vedremo nel prossimo esempio la larghezza avrà uno scopo più importante!
Ecco la demo primo esempio
Menù drpdown avanzato
Con questo esempio voglio mostrare come è possibile avere più sottoliste alterando di poco il codice visto in precedenza. Vediamo l’html:
<div id="drop-menu">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>
<ul>
<li><a href="#">Item 21</a></li>
<li><a href="#">Item 22</a></li>
<li><a href="#">Item 23</a></li>
<li><a href="#">Item 24</a></li>
</ul>
</li>
<li>
<a href="#">Development tools</a>
<ul>
<li><a href="#">Item 31</a></li>
<li><a href="#">Item 32</a></li>
<li><a href="#">Item 33</a></li>
<li><a href="#">Item 34</a></li>
</ul>
</li>
<li>
<a href="#">Web design</a>
<ul>
<li><a href="#">Item 41</a></li>
<li><a href="#">Item 42</a></li>
<li><a href="#">Item 43</a></li>
<li><a href="#">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li>
<a href="#">Work 1</a>
<ul>
<li><a href="#">Work 11</a>
<ul>
<li><a href="#">Work 111</a></li>
<li><a href="#">Work 112</a></li>
<li><a href="#">Work 113</a></li>
</ul>
</li>
<li><a href="#">Work 12</a>
<ul>
<li><a href="#">Work 121</a></li>
<li><a href="#">Work 122</a></li>
<li><a href="#">Work 123</a></li>
</ul>
</li>
<li><a href="#">Work 13</a>
<ul>
<li><a href="#">Work 131</a></li>
<li><a href="#">Work 132</a></li>
<li><a href="#">Work 133</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul>
<li>
<a href="#">Work 21</a>
<ul>
<li><a href="#">Work 211</a></li>
<li><a href="#">Work 212</a></li>
<li><a href="#">Work 213</a></li>
</ul>
</li>
<li><a href="#">Work 22</a>
<ul>
<li><a href="#">Work 221</a></li>
<li><a href="#">Work 222</a></li>
<li><a href="#">Work 223</a></li>
</ul>
</li>
<li><a href="#">Work 23</a>
<ul>
<li><a href="#">Work 231</a></li>
<li><a href="#">Work 232</a></li>
<li><a href="#">Work 233</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul>
<li><a href="#">Work 31</a>
<ul>
<li><a href="#">Work 311</a></li>
<li><a href="#">Work 312</a></li>
<li><a href="#">Work 313</a></li>
</ul>
</li>
<li><a href="#">Work 32</a>
<ul>
<li><a href="#">Work 321</a></li>
<li><a href="#">Work 322</a></li>
<li><a href="#">Work 323</a></li>
</ul>
</li>
<li><a href="#">Work 33</a>
<ul>
<li><a href="#">Work 331</a></li>
<li><a href="#">Work 332</a></li>
<li><a href="#">Work 333</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Nel codice html ho aggiunto ulteriori sottoliste che appariranno come terzo sottolivello al passaggio del mouse. Ed ora vediamo il codice css:
body{
font-size:100%;
color:#333;
font-family:sans-serif;
}
/*container*/
#drop-menu {
margin: 0 auto;
padding: 0;
width: 960px;
}
/*menu*/
ul#menu {
margin:60px 0 0;
padding: 0;
list-style: none;
float:left;
width: 960px;
background-color: #111;
font-size:80%
}
ul#menu li {
margin:0;
padding:0;
float:left;
display: block;
border-right: 1px solid #222;
position: relative;
}
ul#menu li a {
float: left;
padding:12px 30px;
color: #fff;
text-transform: uppercase;
text-decoration:none;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu li a:hover {
background: #666;
color:#fff
}
ul#menu ul {
margin:2px 0 0;
padding:0;
display:inline-block;
list-style: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index:9999;
background: #444;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu li:hover > ul {
opacity: 1;
visibility: visible;
}
ul#menu ul li {
float: none;
display: block;
border: 0;
}
ul#menu ul a {
padding:10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
ul#menu ul a:hover {
background-color: #0186ba;
color:#fff
}
ul#menu ul ul {
top: 0;
left: 150px;
margin: 0;
}Quello che si può notare è che il codice non è molto differente dal primo. Vengono aggiunte infatti nuove linee di codice. Al terzo sottolivello le voci devono spostarsi sulla destra e per farlo sposto l’elemento <ul> con la proprietà left esattamente della larghezza che ho dato all’elemento a. Ecco che il valore dato alla proprietà width acquisisce un ruolo fondamentale.
Ecco la demo secondo esempio
Menu dropdown con transizioni css3
Per questo esempio utilizzo il codice html del primo esempio postato. Il codice css invece è questo:
body{
font-size:100%;
color:#333;
font-family:sans-serif;
}
/*container*/
#drop-menu {
margin: 0 auto;
padding: 0;
width: 960px;
}
/*menu*/
ul#menu {
margin:60px 0 0;
padding: 0;
list-style: none;
float:left;
width: 960px;
background-color: #111;
font-size:80%
}
ul#menu li {
margin:0;
padding:0;
float:left;
display: block;
border-right: 1px solid #222;
position: relative;
}
ul#menu li a {
float: left;
padding:12px 30px;
color: #fff;
text-transform: uppercase;
text-decoration:none;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu li a:hover {
background: #666;
color:#fff
}
ul#menu ul {
margin:2px 0 0;
padding:0;
display:inline-block;
list-style: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index:9999;
background: #444;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu li:hover ul {
opacity: 1;
visibility: visible;
}
ul#menu ul li {
float: none;
display: block;
border: 0;
}
ul#menu ul a {
padding:10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
ul#menu ul a:hover {
background-color: #0186ba;
color:#fff
}Questo codice css è molto simile al primo tranne per il fatto che viene aggiunta la proprietà transition, che ho già spiegato in questo mio articolo dedicato allo slideshow solo con i css3. La proprietà viene applicata sia agli elementi a che agli elementi ul per avere un effetto “morbido” al passaggio del mouse sopra le voci del menù.
Ecco la demo terzo esempio
Menu dropdown con transizioni, angoli arrotondati e background con gradienti css3
Come ultimo esempio prendo come codice html quello del secondo esempio mentre il codice css è il seguente:
body{
font-size:100%;
color:#333;
font-family:sans-serif;
}
/*container*/
#drop-menu {
margin: 0 auto;
padding: 0;
width: 960px;
}
/*menu*/
ul#menu {
margin:60px 0 0;
padding: 0;
list-style: none;
float:left;
width: 960px;
font-size:80%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(255,175,75);
background: rgb(98,125,77);
background: -moz-linear-gradient(top, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,125,77,1)), color-stop(100%,rgba(31,59,8,1)));
background: -webkit-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
background: -o-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
background: -ms-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
background: linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 );
-webkit-box-shadow: 0px 0px 3px 0px #999;
-moz-box-shadow: 0px 0px 3px 0px #999;
box-shadow: 0px 0px 3px 0px #999;
}
ul#menu li {
margin:0;
padding:0;
float:left;
display: block;
border-right: 1px solid #1C2B10;
position: relative;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu li a {
float: left;
display:block;
padding:12px 30px;
color: #fff;
text-transform: uppercase;
text-decoration:none;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu li a:hover {
color:#fff;
background: rgb(115,136,10);
background: -moz-linear-gradient(top, rgba(115,136,10,1) 0%, rgba(115,136,10,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(115,136,10,1)), color-stop(100%,rgba(115,136,10,1)));
background: -webkit-linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
background: -o-linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
background: -ms-linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
background: linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73880a', endColorstr='#73880a',GradientType=0 );
}
ul#menu li:first-child > a {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
ul#menu ul li:first-child > a{
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
ul#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
}
ul#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #fff;
}
ul#menu ul {
margin:2px 0 0;
padding:0;
display:inline-block;
list-style: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index:9999;
background: rgb(115,136,10);
background: -moz-linear-gradient(top, rgba(115,136,10,1) 0%, rgba(115,136,10,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(115,136,10,1)), color-stop(100%,rgba(115,136,10,1)));
background: -webkit-linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
background: -o-linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
background: -ms-linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
background: linear-gradient(top, rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73880a', endColorstr='#73880a',GradientType=0 );
-webkit-box-shadow: 0px 2px 3px 0px #999;
-moz-box-shadow: 0px 2px 3px 0px #999;
box-shadow: 0px 2px 3px 0px #999;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
ul#menu ul li > ul{
-webkit-box-shadow: 2px 2px 3px 0px #999;
-moz-box-shadow: 2px 2px 3px 0px #999;
box-shadow: 2px 2px 3px 0px #999;
}
ul#menu li:hover > ul {
opacity: 1;
visibility: visible;
}
ul#menu ul li {
float: left;
display: block;
border:none;
}
ul#menu ul a {
padding:10px;
width: 130px;
display:block;
float: left;
text-transform: none;
border-bottom:1px solid #1C2B10;
}
ul#menu ul li:last-child > a {
border-bottom:none;
}
ul#menu ul ul {
top: 0;
left: 150px;
margin: 0;
}
ul#menu ul a:hover{
background: rgb(255,175,75);
background: rgb(98,125,77);
background: -moz-linear-gradient(top, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,125,77,1)), color-stop(100%,rgba(31,59,8,1)));
background: -webkit-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
background: -o-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
background: -ms-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
background: linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 );
}Qui vengono utilizzate diverse proprietà:
- transition
- box-shadow
- border-radius
- gradienti css3 (background: linear-gradient)
- content
Oltre a queste proprietà ho utilizzato diversi selettori e il simbolo >:
Con il selettore first-child unito al simbolo > vado ad applicare gli angoli arrotondati soltanto al primo elemento <a> della lista e al primo elemento figlio della lista.
Con il selettore last-child unito al simbolo > vado ad applicare gli angoli arrotondati soltanto all’ultimo elemento <a> della lista.
Con il selettore after , la proprietà content e l’ausilio dei bordi invece vado a disegnare un triangolino che appare soltanto al passaggio del mouse sopra agli elementi <li> che contengono delle sottoliste. Questo trucchetto mi permette di non utilizzare delle immagini e quindi rendere la pagina più leggera.
Come potete notare non ho fatto altro che applicare degli effetti per rendere il menù più accattivante ed in linea con alcuni stile che si possono trovare nei siti odierni.
Ecco la demo quarto esempio
Note
Ci sono molti metodi per realizzare dei menù dropdown e per farsene un’idea basta cercare su google e si trovano veramente tantissime soluzioni.
Un’altra cosa importante da sottolineare è la compatibilità con i browser. Purtroppo chi il supporto non è dei migliori soprattutto con internet explorer. Anche la versione 9, l’ultima attualmente sul mercato ha dei problemi nella visualizzazione. Gli altri browser invece, per gli esempi postati, non hanno problemi.
Come ultima nota ricordo che le transizione css3 non funzionano con i gradienti.
Conclusioni
Lo scopo di questo articolo serve a mostrare le potenzialità dei css e come si possano utilizzare per realizzare cose apparentemente difficili. Ovviamente per costruire qualsiasi cosa serve molta pratica molto studio.
Non mi stancherò mai di ripetere quanto sia importante continuare a studiare in questo campo perchè la tecnologia va avanti e mette a disposizione nuovi strumenti che aiutano sia gli sviluppatori che i designer.
Come sempre l’ultima parola spetta a voi: avete esempi e consigli da mostrare?Ci sono errori nell’articolo?
Segnalate tutto nei commenti!
ho provato menu su un blog pero nulla non funziona su blogger avevo bi sonio per un blog
Ciao Daniel.
Dovresti darmi maggiori indicazioni per poterti aiutare. Quello che ti posso dire è che se utilizzi questo codice in un tuo progetto devi adeguarlo per farlo funzionare.
Attendo un tuo riscontro.
Ma lo script per far funzionare il menù?
Quale script? Il menù in questione è realizzato solo con i css e quindi senza javascript!
Scusa l’ignoranza, sono un principiante.
Volevo inserire il menù in BLOGGER.
Avevo creato una lista ed ho sfruttato il tuo CSS, ma ho riscontrato 2 problemi:
1. i sottomenù non si vedono
2. cambiando pagina sparisce il menù.
probabilmente va cambiata qualche impostazione nel modello, ma non so cosa.
Grazie per l’attenzione.
Ciao.
Integrare un codice all’interno di un template non sempre risulta semplice. Il tutorial che ho messo online riguarda esclusivamente come creare un menu a tendina semplicemente con i css. L’integrazione all’interno di propri progetti si discosta molto da questo articolo e poi senza avere neanche il codice sottomano risulta difficile rispondere alla tua domanda. Magari prova ad essere più preciso e vedrò che posso fare.
Ciao ciao
Buongiorno.
Posso mandarti una mail per un’occhiata veloce?
Grazie
Ciao.
Certamente… scrivimi pure!! 😉
Ciao,
complimenti per l’articolo che mi sembra molto completo…
Personalmente mi sto avvicinando da profano al mondo della programmazione perchè voglio realizzare un sito; sono riuscito a fare un menù a tendina semplice, ma non ne vengo proprio fuori per fare il secondo menu a tendina (la tua demo 2 per intendersi)
Se ti inoltro tutto quello che ho fatto sia come HTML che come CSS, potresti aiutarmi a fare questo menu???
Grazie in anticipo
Pierpaolo
Ciao Pierpaolo.
Ti ringrazio per i complimenti. Scusami se rispondo solo ora ma non sempre sono connesso al sito.
Oggi imparare a realizzare siti web richiede molte conoscenze e quindi del tempo per impararle. Sicuramente il codice che hai scelto di fare, se sei all’inizio, non è il più indicato soprattutto considerando la retro-compatibilità. magari questo menu – http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started – è quello più indicato anche se può risultare più complesso in quanto si utilizza javascript.
Certo che puoi inoltrarmi il codice. Magari crea un file zippato e lo carichi su dropbox e poi lasci un commento con il link al file.
Ciao Danilo, ieri sera mi sono applicato e sono riuscito ad adattare il tuo codice al mio piccolo sito…e funziona 🙂 SODDISFAZIONE 😉
Non riesco a sistemare alcune cosine di layout tipo la centratura dei titoli del menu, ma combinerò…
Quello che mi preoccupa è che su android si vede, ma sull’iPad non si vede nulla…e non so se poi in altri browser si vede o meno.
Puoi darmi il tuo indirizzo e-mail per mandarti il codice HTML e CSS completo così mi dici dove sbaglio e come posso risolvere?
grazie mille
PS: cimentarsi in questo mondo è bellissimo ma a volte mi fa sentire piccolo piccolo 🙂
Ciao Pierpaolo.
Sono molto contento per te che sei riuscito a risolvere i problemi! 😀 Capisco perfettamente la tua soddisfazione!! 😉
Il problema della compatibilità con i vari browser (mobile e desktop) è sempre stato un cruccio per ogni webdesigner. Questo è uno dei motivi che rende questo lavoro piuttosto difficile. Anche io che lavoro da anni mi sento sempre molto ignorante e questo mi sprona a migliorarmi ogni giorno.
Il mio indirizzo e-mail lo trovi nella pagina contatti ma lo scrivo anche in questo commento: [email protected] – Appena ho un secondino questo fine settimana darò uno sguardo al tuo codice!
P.S: la cosa migliore per mandarmi il materiale sarebbe caricarlo su dropbox o un servizio simile e poi mandarmi semplicemente il link per scaricarlo!! Personalmente odio intasare la posta con allegati.
Ciao,
sto realizzando un sito web e ho apprezzato molto il tuo codice per il menù dropdown. C’è un unico problema: su iPad non funziona. Come posso risolvere?
Ciao Raffaele.
Sono contento che il codice che ho postato ti sia stato utile! Diciamo però che il codice che ho postato nell’articolo è un esempio di come si può realizzare un menù dropdown solo coni css ma adatto agli schermi del pc! Per quanto riguarda i table diciamo che un menù dropdown lo vedo un pochino scomodo. Magari dovresti trasformare il menù dropdown in un menù a tendina. ti lascio questo link che spero ti possa tornare utile: http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Ciao,vorrei chiederti un aiutino sto realizzando un menu a tendina per un mio sito,però ho incontrato un piccolo problemino,praticamente i menu a tendina vengono sovrapposti dal immagine sotto come puoi benissimo vedere qui http://high-tech.forumcommunity.net/ come potrei risolvere?grazie.
Ciao.
Ho provato a guardare il link che hai postato ma io non rilevo il problema che hai indicato. Il menù (suppongo quello in alto di colore azzurro) funziona bene e non si sovrappone nulla. Potresti darmi ulteriori dettagli?
va bene grazie per la rapida risposta,ti faccio vedere un screen http://i49.tinypic.com/6h0nm0.png da come vedi mi fa vedere solo “Lamering” in realtà ci sono altri quattro subs sotto da come puoi vedere qui http://shacking.altervista.org/menucss/menu.html
Ok… ho visto qual è il tuo problema. Praticamente tu hai inserito un iframe all’interno del layout. Quell’iframe ha un’altezza fissa di 100px e quindi la tendina del menù non ha abbastanza spazio per potersi estendere e quindi visualizzarsi interamente. Inoltre l’iframe è all’interno di un div con assegnata la classe “sheader” anch’esso con un altezza fissa di 280px.
Il mio consiglio è di controllare attentamente dove includi i vari pezzi di codice e soprattutto fare molta attenzione alle altezze fisse!
Spero di esserti stato di aiuto.
Ho cambiato l’altezza fissa del iframe,comunque il problema persiste il Slider rimane sovrapposto alla menu http://high-tech.forumcommunity.net/ ,comunque hai letto il mio pm?
Per ovviare anche a quel problema basta impostare uno z-index allo slider in modo tale che quest’ultimo stia sotto. Prova ad impostare lo z-index a -100, dovrebbe andare.
A quale messaggio privato ti riferisci? Io ho visto solo i tuoi commenti e per e-mail non ho ricevuto nulla.
controlla adesso.
Ok.. ho ricevuto il messaggio! 😉
Per quanto riguarda il problema ho riguardato il codice della tua pagina. C’è un div contenitore con la classe container. Prova a mettere li lo z-index con il valore -100
fatto niente 😀
Fatto niente il problema continua a persistere.
Questo che mi dici è molto strano. Ho provato personalmente ad applicare lo z-index con il valore -100 al div con la classe container con firebug e il problema si risolveva. Appena ho un secondo ti posto il codice che vedo con firebug così ti mostro dove applico lo z-index
Ciao Danile,
Qualche settimana fa ti avevo girato il link del sito che ho realizzato, anche grazie al tuo aiuto…
Ti chiedevo cosa ne pensavi visto che la tua opinione di esperto del settore mi farebbe piacere.
Probabilmente sei stato impegnato.
Ciao e grazie
Pierpaolo
Ciao Pierpaolo.
Scusami tanto se non ti ho risposto ma ho avuto un problema con gli hard disk del mio pc ed ho perso del materiale. Quando ho ripristinato tutto non mi sono più ricordato di risponderti. Provvederò domani a guardare il sito e a risponderti per e-mail.
Ciao e scusami ancora.
Ciao Daniel,
Ti ricordi di me?
Vedo che hai molte competenze e molta passione sul tuo lavoro, si vede dalle risposte che dai nel blog..
Mi piacerebbe avere una tua opinione sul sito che ho realizzato…
È un sito statico che dovrei implementare con php, ma la strada è molto lunga… penso che farò un corso in merito…
Intanto ho fatto qualcosina e per me è stato un successo…
Se puoi ed hai un po’ di tempo per me ne serai lusingato…
Grazie
Pierpaolo
Ciao Pierpaolo.
Certo che mi ricordo! 😀 Ti ringrazio molto per i complimenti… sei troppo gentile!!
Penso che come primo lavoro sia un buon inizio. Sicuramente hai molto strada da fare e il mio consiglio è quello di farti un buon corso sul web design prima di intraprendere la programmazione. Ti consiglio questo in quanto devi apprendere molte nozioni sulla grafica inerente al web, a come disegnare e impostare i layout, di come poter organizzare i contenuti di un sito, usabilità, accessibilità, ottimizzazione del codice, e molto altro.
Purtroppo serve del tempo per apprendere tutte queste nozioni e molta pazienza. Se hai voglia di imparare ti posso garantire che questa è la strada migliore da seguire. L’unico problema è che trovare dei corsi di web design qui in Italia fatti bene è piuttosto difficile.
Spero di essere stato esaustivo nella risposta. Nel caso scrivimi pure per avere delucidazioni.
Ciao
Danilo
ciao. ho seguito alla lettera la tua guida, però il menu a tendina va sotto i post. come posso risolvere il problema? il mio blog è questo http://otaku-no-style.blogspot.it/
Ciao Daniel.
Il problema ti si pone in quanto tu hai messo il menù all’interno di un div il quale probabilmente ha un’altezza fissa. Inoltre i div che vengono immediatamente dopo hanno la priorità rispetto al div che contiene il menù e quindi la “tendina” resta sotto.
Spero di averti dato qualche suggerimento utile per risolvere il tuo problema!
Ciao
Salve
Innanzitutto complimenti per l’ottima guida.
Io sono entrato da poco nel mondo dell’html (anche se sono abbastanza giovane) e fino ad ora ho imparato qualcosa ma praticamente da “autodidatta”.
Ho provato a inserire il menù “Menu dropdown con transizioni css3” nel mio blog ma ho riscontrato un problema: le sottosezioni non vanno oltre la barra del menù vero e proprio. Ho fatto anche delle prove modificando il parametro top che da quanto ho capito mi permetteva di far salire le sottosezione, per vedere se avevo fatto tutto correttamente ma ho notato che le sottosezioni esistono. Questo è il mio blog http://ipitagorici.blogspot.it/ e questo ciò che mi appare http://gyazo.com/7dff300e0cf8f850bcf418e377560c67 . Potresti aiutarmi? Grazie
Gianluigi
Ciao Gianluigi.
Ti ringrazio per i complimenti. Non sei il primo che ha problemi nell’integrare il menù all’interno di un template di blogspot. Purtroppo io non lo utilizzo e quindi non so esattamente quale sia il problema. Da quello che ho potuto constatare è che il menù va a posizionarsi in un div con un’altezza fissa che impedisce poi alle sottosezioni di mostrarsi. Se guardi bene le sottosezioni si “mostrano” ma restano all’interno di uno o più div della parte superiore del template.
Sicuramente si può modificare il template di blogspot ma sinceramente io non l’ho mai fatto e quindi non so come aiutarti.
Mi spiace non esserti di aiuto!
Veramente quello che si dovrebbe dispiacere in questo caso è Google visto che dice che si possa mettere un menù css (esiste una sezione apposita dove si inserisce il menù in css) ma in realtà non lo fà o per lo meno non ci sono spiegazioni su come farlo. Siccome uso quel blog per gestire il fantacalcio speravo di fare qualcosa di carino ma viste le complicazioni ci ho rinunciato. Grazie comunque e scusa per il disturbo!
Non hai disturbato per nulla. I commenti sul mio blog sono aperti a tutti e se posso cerco di aiutare. In questo caso non utilizzando il servizio da te indicato non so darti indicazioni. Quello che posso dirti è che sicuramente un’occhiata a blogspot la darò sicuramente appena ho un minutino di tempo.
Ciao e buona serata
Danilo
ciao,
ho creato un bel dropdown grazie alla tua spiegazione, ma sorge un problema quando inserisco le transazioni come nel secondo esempio.
Quando inserisco :
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
il mio notepad++ non riconosce i comandi(cioè non si colorano) e i menu nn si aprono correttamente.
Come posso fare?
Ciao Fabio.
Purtroppo è da molto tempo che non uso notepad++ e quindi non so spiegarti come mai non interpreta i comandi. Una spiegazione plausibile è che non ha integrato questi comandi anche se mi sembra strano. Un’altra spiegazione possibile è: la proprietà con il relativo valore precedente a -ms-transition: all 0.6s ease ha il ; finale?
Hai inserito tutte le relative proprietà: -webkit-transition: all 0.6s ease; | -moz-transition: all 0.6s ease; | -ms-transition: all 0.6s ease; | -o-transition: all 0.6s ease; | transition: all 0.6s ease;
Nel caso, se hai ancora problemi, puoi creare un pacchetto zippato con all’interno il tuo codice e spedirmelo per mail? Vedrò di risolvere il problema.
M’è venuto un mal di testa! Sembra proprio un’altra lingua… però, è apprezzabile che ci sia chi ce la faccia.
Sicuramente questo è un “mondo” che deve piacere! Come ogni lavoro c’è chi riesce meglio in una cosa e chi un’altra. Io amo queste cose e per me oltre che un lavoro sono un bel passatempo!! 😉
Il Menu a Tendina funziona benissimo su MOZILLA, GOOGLE CHROME MA SU EXPLORER LASCIA UN PICCOLO GAP FRA IL BANNER DEL MENU E LE SUE TENDINE APERTE. IL MOUSE SE NE ACCORGE ED OSCURA LA TENDINA PASSANDOCI SOPRA. SI FA FATICA AD ENTRARE NELLA TENDINA. COSA PUO’ ESSERE????
GRAZIE
SILVANO
Ciao Silvano. Mi potresti indicare la versione di internet explorer sulla quale hai fatto il test?
Grazie, è perfetto!
Figurati! È stato un piacere esserti di aiuto! 😉
ciao, mi è piaciuto molto il menu a comparsa con css ma ho riscontrato un problema con chrome Versione 30.0.1599.69 l’ultimo
solo con questo browser non funziona. sapresti dirmi perchè e correggerlo?
grazie
luca pastorino
Ciao Luca.
Scusa se ti rispondo solo ora ma sono stato impegnato! Ho controllato ora il menù sulla versione del browser che hai indicato e funziona correttamente. Non ho idea di quale problema tu abbia riscontrato, mi spiace!
Potresti riprovare? (Su quale sistema operativi lo provi?)
Io ho un problema che non riesco assolutamente a risolvere :/
Se io ho 2 div, come faccio (utilizzando solo il CSS) passando su un div a spostare l’altro.
Che so, passo sul div rosso e sposto quello blu…
Ciao Luca.
Il tuo commento non ha nulla a che vedere con l’articolo. Posso risponderti per email però.
Danilo
Ciao, complimenti per l’ottimo lavoro. Vorrei qualche esempio sull’utilizzo di questi menu dropdown posizionati come FIXED, cioè la possibilità di visualizzare il menu nella parte alta delle pagine rendendolo non scrollabile con il resto del contenuto. Spero di essere stato chiaro. Grazie.
Ciao Fabio.
Ti ringrazio per i complimenti! Per quanto riguarda la tua domanda ti posso suggerire questo plugin jquery: https://github.com/nnattawat/fixtop
Se invece ti interessa mantenere la barra sempre fissa in alto basta creare un div che contenga il menù e poi dare i seguenti valoti nel css: position:fixed; top:0; left:0;
Spero di esserti stato utile.
Danilo
Ciao! scusa il disturbo e spero che tu sia ancora attivo ma non riesco a visualizzare il primo codice del css per il menu base!
Ciao.
Nessun disturbo, figurati! In che senso non riesci a visualizzare il primo codice del css per il menù base? Ho controllato l’articolo e visualizzo tutto correttamente! Purtroppo non capisco dove sia l’errore. potresti ricontrollare e farmi sapere?
Danilo
ciao senti sto realizzando un menù a tendina e sto prendendo come spunto il tuo demo primo solo che inserisco il codice html sul mio notepaad e poi salvo il codice css sul blocco note style.css quando eseguo il tutto compare solo il codice html senza style come posso fare??
Ciao Vincenzo.
Domanda banale: hai collegato il foglio di stile alla pagina html? Se lo hai fatto dovrei vedere il tuo codice per poterti aiutare!
si è collegato il foglio di stile ho seguito passo passo i tuoi esempi ho fatto copia e incolla come posso passarti il codice per email?
Riesci a creare un file zippato e spedirlo a info[at]ndstyle.it?
si inviata a info[at]ndestyle.it ricevuta?
Penso tu abbia sbagliato indirizzo perchè non l’ho ricevuta. Quello corretto è info[at]ndstyle.it Puoi rinviarla?
P.S: quando scrivi un indirizzo email qui nei commenti scrivilo come ho fatto io!
Si controlla ora
ciao, ho creato un menu dropdown seguendo le tue istruzioni. Funziona tutto solo che rimane uno spazio bianco sopra il menu, come potrei risolvere questo problema???
Ciao Supertia.
Scusami se rispondo solo ora ma ho avuto una giornata piuttosto piena.
Lo spazio bianco sopra il menù potrebbe dipendere da altro codice inserito nella pagina. Senza visionare il sorgente mi è impossibile capire dove sta il problema.
Puoi inviarmi il link?!
Danilo
http://tuttosullatecnologia1.altervista.org/
Ciao.
Per rimuove lo spazio basta che modifichi ul#menu mettendo margin:0.
Buona serata
Danilo
OK grazie
è possibile gestire il menu che si adatti alla larghezza della pagina ? (tipo width=100% per intenderci) grazie
Ciao Saverio.
Il menù che ho creato per l’esempio è all’interno di in contenitore di larghezza pari a 960px. Anche il menù ha la stessa larghezza. Quello che puoi fare è modificare questi valori mettendo 100% alla larghezza. Se invece vuoi che anche le voci del menù si adattino devi modificare molto altro codice. Il menù non è responsive. A breve pubblicherò un articolo che riprenderà la questione dei menù dropdown e sarà anche responsive.
Spero di esserti stato di aiuto
Danilo
grazie danilo gentilissimo! si avevo provato cosi ma poi i sottomenu si incriccano 🙂 . per ora ho risolto mettendo tutto in una tabella con lo stesso colore di sfondo a 100% cosi sembra responsive 🙂 ma attendo allora la novità. grazie ancora