• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Domanda Rotazione Menù orizzontale in verticale

Alcholic

Utente Attivo
Autore del topic
5 Ottobre 2012
448
39
Miglior risposta
0
Salve, come si fa a ruotare un classico menù formato da bottoni in uno stesso menu ma in verticale sulla sinistra tramite javascript?
 
Salve, come si fa a ruotare un classico menù formato da bottoni in uno stesso menu ma in verticale sulla sinistra tramite javascript?

Spiegati meglio...

in pratica hai un menù composto da elementi affiancati (immagino con un float) e vuoi trasformarlo in una lista formata da elementi che si trovano uno sotto l'altro? Questo, in quale occasione dovrebbe accadere?

In ogni caso non si tratta di Javascript ma più di CSS, perché devi ristilizzare gli elementi del menù, ovviamente in occasione di un dato evento (che può essere l'hover del mouse su un elemento, la riduzione della larghezza della pagina, il click da qualche parte e così via).

Potresti essere più specifico e possibilmente indicare il codice che hai già sviluppato tu eventualmente? (Quantomeno la struttura HTML e le regole CSS che utilizzi per il menù).
 
Ciao allora quello che devo fare è trasformare un classico drop down menu, orizzontale e formato da bottoni, in un altro drop menu ma verticale con espansione orizzontale e, di conseguenza, rendere tutto il contenuto della pagina adattabile allo spostamento del menu. In oltre il menu deve cambiare posizione a seguito del clic del relativo tasto "ruota menu".
<nav> <div id="drop-menu" >
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Antipasti</a>
<ul>
<li><a href="#">Bruschette</a></li>
<li><a href="#">Frittura all'Italiana</a></li>
<li><a href="#">Prociutto Crudo e Mozzarella</a></li>
<li><a href="#">Formaggi</a></li>
<li><a href="#">Prociutto e Mellone</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Primi</a>
<ul>
<li><a href="#">Gnocchi alla Sorrentina</a></li>
<li><a href="#">Linguine ai Frutti di Mare</a></li>
<li><a href="#">Penne alla Boscaiola</a></li>
<li><a href="#">Trofie Gamberi e Zucchini</a></li>
<li><a href="#">Risotto ai Frutti di Mare</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Secondi</a>
<ul>
<li><a href="#">Scaloppina al Limone</a></li>
<li><a href="#">Misto Carne</a></li>
<li><a href="#">Bistecca alla Fiorentina</a></li>
<li><a href="#">Frittura di Pesce Mista</a></li>
<li><a href="#">Orata al Forno</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
</li>
<li><a href="#">Contorni</a>
<ul>
<li><a href="#">Insalata</a></li>
<li><a href="#">Patate Fritte</a></li>
<li><a href="#">Zucchine alla Scapece</a></li>
<li><a href="#">Funchi Porcini</a></li>
<li><a href="#">Peperoni Gratinati</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Frutta</a>
<ul>
<li><a href="#">Banana</a></li>
<li><a href="#">Mela</a></li>
<li><a href="#">Pera</a></li>
<li><a href="#">Ananas</a></li>
<li><a href="#">Frutta di Stagione</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Dolci</a>
<ul>
<li><a href="#">Tiramis&ugrave;</a></li>
<li><a href="#">Caprese</a></li>
<li><a href="#">Panna Cotta</a></li>
<li><a href="#">Crostata</a></li>
<li><a href="#">Profiteroles</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Panini</a>
<ul>
<li><a href="#">Polpette + Contorno</a></li>
<li><a href="#">Pollo + Contorno</a></li>
<li><a href="#">Porchetta + Contorno</a></li>
<li><a href="#">Wurstel + Contorno</a></li>
<li><a href="#">Hamburger + Contorno</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Pizze</a>
<ul>
<li><a href="#">Margherita</a></li>
<li><a href="#">Marinara</a></li>
<li><a href="#">Primavera</a></li>
<li><a href="#">4 Stagioni</a></li>
<li><a href="#">Ortolana</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Bibite</a>
<ul>
<li><a href="#">CocaCola</a></li>
<li><a href="#">Aranciata</a></li>
<li><a href="#">Birra</a></li>
<li><a href="#">Sprite</a></li>
<li><a href="#">Vino</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
</div>
<nav> <div id="drop-menu" >
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Antipasti</a>
<ul>
<li><a href="#">Bruschette</a></li>
<li><a href="#">Frittura all'Italiana</a></li>
<li><a href="#">Prociutto Crudo e Mozzarella</a></li>
<li><a href="#">Formaggi</a></li>
<li><a href="#">Prociutto e Mellone</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Primi</a>
<ul>
<li><a href="#">Gnocchi alla Sorrentina</a></li>
<li><a href="#">Linguine ai Frutti di Mare</a></li>
<li><a href="#">Penne alla Boscaiola</a></li>
<li><a href="#">Trofie Gamberi e Zucchini</a></li>
<li><a href="#">Risotto ai Frutti di Mare</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Secondi</a>
<ul>
<li><a href="#">Scaloppina al Limone</a></li>
<li><a href="#">Misto Carne</a></li>
<li><a href="#">Bistecca alla Fiorentina</a></li>
<li><a href="#">Frittura di Pesce Mista</a></li>
<li><a href="#">Orata al Forno</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
</li>
<li><a href="#">Contorni</a>
<ul>
<li><a href="#">Insalata</a></li>
<li><a href="#">Patate Fritte</a></li>
<li><a href="#">Zucchine alla Scapece</a></li>
<li><a href="#">Funchi Porcini</a></li>
<li><a href="#">Peperoni Gratinati</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Frutta</a>
<ul>
<li><a href="#">Banana</a></li>
<li><a href="#">Mela</a></li>
<li><a href="#">Pera</a></li>
<li><a href="#">Ananas</a></li>
<li><a href="#">Frutta di Stagione</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Dolci</a>
<ul>
<li><a href="#">Tiramis&ugrave;</a></li>
<li><a href="#">Caprese</a></li>
<li><a href="#">Panna Cotta</a></li>
<li><a href="#">Crostata</a></li>
<li><a href="#">Profiteroles</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Panini</a>
<ul>
<li><a href="#">Polpette + Contorno</a></li>
<li><a href="#">Pollo + Contorno</a></li>
<li><a href="#">Porchetta + Contorno</a></li>
<li><a href="#">Wurstel + Contorno</a></li>
<li><a href="#">Hamburger + Contorno</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Pizze</a>
<ul>
<li><a href="#">Margherita</a></li>
<li><a href="#">Marinara</a></li>
<li><a href="#">Primavera</a></li>
<li><a href="#">4 Stagioni</a></li>
<li><a href="#">Ortolana</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
<li><a href="#">Bibite</a>
<ul>
<li><a href="#">CocaCola</a></li>
<li><a href="#">Aranciata</a></li>
<li><a href="#">Birra</a></li>
<li><a href="#">Sprite</a></li>
<li><a href="#">Vino</a></li>
<li><a href="#">Visualizza Altro</a></li>
</ul>
</div>

#drop-menu {
width: 100%;
height: 3em;
}

/*menu*/

ul#menu {
list-style: none;
float:left;
width: 97.8%;
height: 3em;
font-size:100%
}

ul#menu li {
float:left;
display: block;
position: relative;
}

ul#menu li a {
float: left;
background: #ffbf00;
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
box-shadow: 0px 1px 0px 0px #fff6af;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:emoji_smiley:XImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
background-color:#ffec64;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:13px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}

ul#menu li a:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:emoji_smiley:XImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}

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;
width: 100px;
}

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;
width: 300px;
}

ul#menu ul a:hover {
background-color: #0186ba;
color:#fff
}


ul#menu li a:active {
position:relative;
top:1px;
}