• 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
5 Ottobre 2012
448
0
37
21
Miglior risposta
0
#1 Autore del topic
Salve, come si fa a ruotare un classico menù formato da bottoni in uno stesso menu ma in verticale sulla sinistra tramite javascript?
 

Matheeus

Amministratore
Amministratore
Redattore
28 Dicembre 2006
3.739
356
124
Aversa
Miglior risposta
0
#2
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ù).
 

Alcholic

Utente Attivo
5 Ottobre 2012
448
0
37
21
Miglior risposta
0
#3 Autore del topic
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;
}
 
Shoutbox
  1. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  2. eskereboyz eskereboyz: https://www.sciax2.it/forum/threads/account-habbo.700424/
  3. DarkKB DarkKB: @999k https://www.sciax2.it/forum/threads/new-luxworld.700391/
  4. 999k 999k: https://www.sciax2.it/forum/threads/ihabbon-project.700336/
  5. 999k 999k: Retro innovativi ne abbiamo?
  6. JaxosItalia JaxosItalia: https://www.sciax2.it/forum/threads/jaxos-hotel.700052/
  7. DarkKB DarkKB: https://www.sciax2.it/forum/threads/new-luxworld.700391/
  8. #KiK #KiK: Amiciiiii
  9. Mr. Aizen Mr. Aizen: Buondì
  10. F FulmineVerde: https://www.sciax2.it/forum/threads/aumentare-prestazioni-del-pc.700408/
  11. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  12. TokosRetro TokosRetro: Salve
  13. -Marco -Marco: Ciao bellissimi!
  14. #KiK #KiK: Siiii
  15. Cristoforo58 Cristoforo58: Kaffeee?!1!1!11 @#KiK
  16. #KiK #KiK: We my friendz
  17. F FulmineVerde: Ci sono vinny e Cristoforo che accedono
  18. F FulmineVerde: Non è stato abbandonato
  19. Alert Alert: C'è un mod che ha l'ultimo login a maggio °-°
  20. Alert Alert: Ma il forum è stato abbandonato o è una mia impressione?
  21. F FulmineVerde: https://www.sciax2.it/forum/threads/problema-paginazione-php-pdo.700399/
  22. #Egzon14 #Egzon14: Che brutta fine che sta facendo Sciax2
  23. DarkKB DarkKB: Ciao, Benvenuto in Sciax2 Forum. La Community tratta di tutto, Giochi online, computer,vita quotidiana
  24. Old.Hunter Old.Hunter: oltre a ciò, potreste dirmi di cosa tratti precisamente questa community?
  25. Old.Hunter Old.Hunter: Ciao a tutti, mi sono appena registrato per vendere un mio servizio
Top