• 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.738
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-: Cerco beta testers, o persone che cercando un retro fatto come si deve: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  2. XxxMarcoxxX XxxMarcoxxX: https://www.sciax2.it/forum/threads/nuova-app-novembre-2019-5-eur-di-benvenuto-5-eur-per-ogni-amico-a-che-inviti.700640/
  3. #KiK #KiK: Come guadagnare fino a 10.. *tosse* centesimi in un giorno
  4. TakeoMasaki TakeoMasaki: Salve! Date un occhiata: https://www.sciax2.it/forum/threads/guadagnare-fino-a-1000eur-al-giorno-jupvideo-com.700635/
  5. Cristoforo58 Cristoforo58: :))
  6. 404Error 404Error: Mi fa piacere che questo forum sia ancora in piedi... Quanti giorni interi passati qui dentro!!!
  7. -Sicily94- -Sicily94-: Giorno, cerco beta testers, o persone che cercando un retro fatto come si deve: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  8. #KiK #KiK: Amicii
  9. Cristoforo58 Cristoforo58: Ti ho inviato un PM
  10. -Sicily94- -Sicily94-: Giorno, se cè un MOD disponibile potrebbe contattarmi? Grazie
  11. Carlos. Carlos.: https://www.sciax2.it/forum/threads/joox-full-automated-account-shop.700606/
  12. DarkKB DarkKB: https://www.sciax2.it/forum/threads/habbor-hotel-online.700555/
  13. DjLolOwna DjLolOwna: ho bisogno di una mano
  14. DjLolOwna DjLolOwna: chi è bravo in java?
  15. 𝕴𝖔𝖗𝖔𝖘𝖒 𝕴𝖔𝖗𝖔𝖘𝖒: *PER I PROGETTI CONTATTATEMI*
  16. -Sicily94- -Sicily94-: Ciao, sto cercando persone per questo progetto: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  17. Snowierthrone Snowierthrone: https://www.sciax2.it/forum/threads/anti-virus-tool-per-scovare-backdoor-o-altri-virus-in-file-jar.700600/
  18. Askarymt2 Askarymt2: Va' ancora metin su questo forum?
  19. minaminohw minaminohw: conosce sito per vpn gratuite e affidabili?
  20. 𝕴𝖔𝖗𝖔𝖘𝖒 𝕴𝖔𝖗𝖔𝖘𝖒: Ciao
  21. minaminohw minaminohw: yeao
  22. #KiK #KiK: rispondete please in amore e sentimenti
  23. F fabioref: Ragazzi quale admin posso contattare per assistenza?
  24. 𝕴𝖔𝖗𝖔𝖘𝖒 𝕴𝖔𝖗𝖔𝖘𝖒: Sera
  25. #James #James: ueeeeeeee
Top