Menù

[Carlito's]

Mi occorre sapere come si crea un menù a discesa. mi può aiutare qualcuno?

[carlomarangoni]

Cosa intendi per menu a discesa? Spiegati meglio o fai un esempio

[php76]

<option>

L'elemento <option> è utilizzato all'interno dell'elemento <select>, elenca una serie di diversi valori sui quali poter operare una scelta. Ha due attributi: selected (opzionale) per indicare il valore preselezionato e value per indicare i valori assegnati alle singole voci. Le possibili voci sono visibili cliccando sul triangolino a fianco della prima voce. Questo elemento necessita del relativo tag di chiusura: </option><select name="nome">
<option value="scelta uno">scelta uno</option>
<option value="scelta due">scelta due</option>
</select>

[Carlito's]

QUELLO QUI SOTTO È QUELLO CHE VOGLIO FARE TROVATO NEL WEB, MA NON SO ESSATTAMENTE COME FARE. NON SONO TANTO PRATICO DI HTML5 e CSS3 PROGRAMMO SOLO HTML e CSS E NON SO SE CE QUALCHE DIFFERENZA QUALCUNO MI PUÒ AIUTARE?
In questo tutorial, creeremo un menu di navigazione a tendina molto umile usando HTML5 eCSS3. Utilizzeremo jQuery per gestire gli effetti e per aggiungere il tocco finale. HTML5 aggiunge alla specifica un elemento che deve essere usato come "contenitore" per qualsiasi struttura di navigazione principale, come ad esempio i principali menu di navigazione, siano essi verticali o orizzontali o una tabella in pagine di contenuti.Browser come IE 8 (e inferiori) purtroppo non supportano questo nuovo elemento, ma vi è una soluzione molto semplice per ovviare al problema. Con il CSS3, possiamo fare a meno di quello che avrebbe un tempo avrebbe richiesto l’uso di diverse immagini di sfondo ed, eventualmente, uno o due div supplementari per poter dare ombreggiature o arrotondare gli angoli. Anche in questo caso, non tutti i browser supportano queste nuove proprietà, ma possiamo facilmente fornire soluzioni di ripiego per i browser che non possono gestire i nostri stili.Passo 0 - Implementare jQuery e ModernizrPer implementare jQuery basta includere il seguente codice, sfruttando le Google API:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>Modernizr è una libreria JavaScript che permette di abilitare il supporto ai nuovi tag html5 ed alle proprietà CSS ai browser che non lo supportano. Inoltre, anche se non approfondiremo troppo questo aspetto nell’articolo, è possibile discriminare i browser (e quindi gli utenti) per le proprietà che sono in grado di supportare. Scaricala qui ed includila nel documento.Passo 1 - Scheletro HTMLCostruiamo lo scheletro HTML:<nav id="myNav">
<ul>
<li><a href="#" title="Link 1">Link 1</a></li>
<li><a href="#" title="Link 1">Link 2</a>
<ul>
<li><a href="#" title="Sub Link 1">Sub Link 1</a></li>
<li><a href="#" title="Sub Link 2">Sub Link 2</a></li>
<li><a href="#" title="Sub Link 3">Sub Link 3</a></li>
<li><a href="#" title="Sub Link 4">Sub Link 4</a></li>
<li class="last"><a href="#" title="Sub Link 5">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#" title="Link 1">Link 3</a></li>
<li><a href="#" title="Link 1">Link 4</a></li>
<li class="last"><a href="#" title="Link 1">Link 5</a></li>
</ul>
</nav>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies molestie elit et commodo. Phasellus libero odio, cursus non dapibus molestie, scelerisque ut dolor. Nunc lacinia ipsum at ipsum iaculis semper. Ut non lectus nisl, at vestibulum lectus. Nulla facilisi. In venenatis, sapien vitae mollis feugiat, tellus elit accumsan magna, sed egestas lectus sapien non erat. Donec placerat placerat laoreet. Mauris vel ligula vestibulum felis venenatis lobortis sit amet vel odio. Sed iaculis dolor sed felis vestibulum pulvinar. Nam vulputate laoreet aliquam. Donec tempus pulvinar nibh ut ultricies. Sed lacinia placerat purus, quis elementum arcu ornare nec. Maecenas convallis ultrices sollicitudin. Praesent suscipit dapibus pharetra. Suspendisse convallis ipsum id purus vestibulum ut elementum odio tincidunt. Praesent non lacinia nisi.
</div>Abbiamo l’elemento come contorno ad un elenco di collegamenti, con qualche sotto-menu.Passo 2 - Un po’ di stileOra aggiungiamo un po ‘di stile di base, creando un qualcosa di questo tipo:nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; }
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }

.borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#222)); }
.boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); }
.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); }
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }La prima regola è puramente dedicata agli utenti che hanno JavaScript disabilitato e permette di visualizzare il sottomenu nascosto usando la proprietà hover, quindi esclusivamente con i CSS. Il resto del codice definisce un insieme di stili di base che formato il menu nel modo che vogliamo, senza aggiungere nulla di troppo decorativo.Alcune classi usate nel CSS (cssgradients, boxshadow, etc…), sono specifiche che vengono aggiunte da Modernizr al documentoPasso 3 - JavaScript/jQueryOra aggiungiamo qualche script che rendono il tutto più fluido:jQuery(document).on("ready", function () {

// Salvo il nav in una variabile
var nav = $( "#myNav" );

// Aggiungo la freccia e l'effetto hover su ogni sotto menu
nav.find("li").each(function () {
if ($(this).find("ul").length > 0) {
$("").text("^"). appendTo($(this).children(":first")); // Mosta i sottomenu per hover $(this).on("mouseenter", function () { $(this).find("ul"). stop(true, true). slideDown( ); }); // Nasconde i sottomenu all'uscita del mose $(this).on("mouseleave", function () { $(this).find("ul"). stop(true, true). slideUp( ); }); } }); });