Menu verticale

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
Sto cercando di fare un menu verticale elastico, es:

mettiamo che ci sono 2 item, FRUTTA e COLORI

FRUTTA
mela
pera

COLORI
rosso
verde

I sotto-item devono rimanere nascosti, ma apparire quando si clicca sull' item principale (es FRUTTA)

Il punto che vorrei fare è che il div deve essere elastico perciò se es. clicco su FRUTTA devono apparire i 2 sotto-item e rimanere aperti, e nello stesso tempo l'item COLORI deve spostarsi in basso e riposizionarsi quando chiudo FRUTTA o quando clicco su COLORI (in questo ultimo caso FRUTTA si deve chiudere da solo)

In rete non l'ho trovato così
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Avevo postato questo codice tempo fa, ma non lo trovo quindi lo riposto
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function apriChiudi(num){    
                for(var i=0;i<3;i++){        
                    if(i == num){                
                        if(document.getElementById("categoria_"+i).style.display == "inline") {
                            document.getElementById("categoria_"+i).style.display="none";                    
                        }else{
                            document.getElementById("categoria_"+i).style.display="inline";
                        }
                    }
                    else document.getElementById("categoria_"+i).style.display="none";
                }
            }
        </script>
        <style type="text/css">
            li a{
                text-decoration: none;
            }
            .nascosto {
                display:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a onclick="apriChiudi(0);return false" href="#"> CATEGORIA 0</a>
                <ul class="nascosto" id="categoria_0">
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                </ul>
            </li>
            <li><a onclick="apriChiudi(1);return false" href="#"> CATEGORIA 1</a>
                <ul class="nascosto" id="categoria_1">
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                </ul>
            </li>
            <li><a onclick="apriChiudi(2);return false" href="#"> CATEGORIA 2</a>
                <ul class="nascosto" id="categoria_2">
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                </ul>
            </li>
        </ul> 
    </body>
</html>
vedi se puo andare o se almeno riesci a prendere spunto
 

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
Avevo postato questo codice tempo fa, ma non lo trovo quindi lo riposto
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function apriChiudi(num){    
                for(var i=0;i<3;i++){        
                    if(i == num){                
                        if(document.getElementById("categoria_"+i).style.display == "inline") {
                            document.getElementById("categoria_"+i).style.display="none";                    
                        }else{
                            document.getElementById("categoria_"+i).style.display="inline";
                        }
                    }
                    else document.getElementById("categoria_"+i).style.display="none";
                }
            }
        </script>
        <style type="text/css">
            li a{
                text-decoration: none;
            }
            .nascosto {
                display:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a onclick="apriChiudi(0);return false" href="#"> CATEGORIA 0</a>
                <ul class="nascosto" id="categoria_0">
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                </ul>
            </li>
            <li><a onclick="apriChiudi(1);return false" href="#"> CATEGORIA 1</a>
                <ul class="nascosto" id="categoria_1">
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                </ul>
            </li>
            <li><a onclick="apriChiudi(2);return false" href="#"> CATEGORIA 2</a>
                <ul class="nascosto" id="categoria_2">
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                </ul>
            </li>
        </ul> 
    </body>
</html>
vedi se puo andare o se almeno riesci a prendere spunto

Ok, provo anche questo...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
poi prova anche questa scritta con Jquery
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style type="text/css">
            li span{
                cursor:pointer;
            }
            .subcat {
                display:none;
            }
        </style>
    </head>
    <body>
        <ul id="lista">
            <li>
                <span id="0" class="cat"> CATEGORIA 0</span>
                <ul class="subcat" id="cat_0">
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                </ul>
            </li>
            <li>
                <span id="1" class="cat"> CATEGORIA 1</span>
                <ul class="subcat" id="cat_1">
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                </ul>
            </li>
            <li>
                <span id="2" class="cat">  CATEGORIA 2</span>
                <ul class="subcat" id="cat_2">
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                </ul>
            </li>
        </ul> 
        <script>
            $("#lista span.cat").click(function(){
                
                $("#lista li ul").slideUp();
                
                if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                    $("#cat_" + $(this).attr("id")).slideDown();          
                    
            })
        </script>
    </body>
</html>
 

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
poi prova anche questa scritta con Jquery
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style type="text/css">
            li span{
                cursor:pointer;
            }
            .subcat {
                display:none;
            }
        </style>
    </head>
    <body>
        <ul id="lista">
            <li>
                <span id="0" class="cat"> CATEGORIA 0</span>
                <ul class="subcat" id="cat_0">
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                    <li>Nome 0</li>
                </ul>
            </li>
            <li>
                <span id="1" class="cat"> CATEGORIA 1</span>
                <ul class="subcat" id="cat_1">
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                </ul>
            </li>
            <li>
                <span id="2" class="cat">  CATEGORIA 2</span>
                <ul class="subcat" id="cat_2">
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                    <li>Nome 2</li>
                </ul>
            </li>
        </ul> 
        <script>
            $("#lista span.cat").click(function(){
                
                $("#lista li ul").slideUp();
                
                if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                    $("#cat_" + $(this).attr("id")).slideDown();          
                    
            })
        </script>
    </body>
</html>

Questo sembra migliore, è più dolce, vedo che prende dati da qui, posso io modificarlo, colori, ecc?

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
questo è uno dei modi possibili per includere la libreria Jquery: in questo caso il file si trova sul sito di jquery

il resto della pagina è html e javascript quindi puoi modificarla come vuoi
attento che lo script
Codice:
            $("#lista span.cat").click(function(){
                
                $("#lista li ul").slideUp();
                
                if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                    $("#cat_" + $(this).attr("id")).slideDown();          
                    
            })
usa gli id e le classi per riferirsi agli elementi, se cambi nome alle classi dovrai aggiornare anche lo script
 

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
questo è uno dei modi possibili per includere la libreria Jquery: in questo caso il file si trova sul sito di jquery

il resto della pagina è html e javascript quindi puoi modificarla come vuoi
attento che lo script
Codice:
            $("#lista span.cat").click(function(){
                
                $("#lista li ul").slideUp();
                
                if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                    $("#cat_" + $(this).attr("id")).slideDown();          
                    
            })
usa gli id e le classi per riferirsi agli elementi, se cambi nome alle classi dovrai aggiornare anche lo script
Non è meglio che la libreria me la metto in un mio file nel sito?

Metti che per un qualche motivo il sito di jQuerry non è accessibile, non vi funzionerebbe il codice nel mio sito
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non è meglio che la libreria me la metto in un mio file nel sito?
Si, anche secondo me è meglio, dicevo che quello è uno dei modi per includerla
qui sul forum la posto cosi perchè copiando e incollando il codice è sicuro che venga richiamata
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la versione minified pesa di meno (91,2 KB)
non credo ci sia bisogno di modificarla
 

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
la versione minified pesa di meno (91,2 KB)
non credo ci sia bisogno di modificarla
Questo si stampa lineare e mi da errore quando tento di salvare il file con TextWrangler

jquery.js:2: The character “” (unicode 0xFEFF) cannot be represented in the “Western (ISO Latin 1)” encoding
 

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
Sono alle prime armi, devo modificare questo codice ma non so dove, ho già la libreria in un file, il codice funziona

PHP:
<style type="text/css">
li span{
    color: #004080;
    cursor:pointer;
}
.subcat {border:1px solid red;
    color: red;
    display:none;
}
</style>

<ul id="lista">
            <li>
                <span id="1" class="menu1a">Dr. Sohrab Khoshbin</span>
                <ul class="subcat" id="cat_1">
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                    <li>Nome 1</li>
                </ul>
            </li>
        </ul> 
        <script>
            $("#lista span.menu1a").click(function() {
                
                $("#lista li ul").slideUp();
                
                if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                    $("#cat_" + $(this).attr("id")).slideDown();          
                }
            )
        </script>
Stampa così con i pallini a sx, io devo toglierli e quando clicc o su PRODOTTO deve aprirsi e rimanere aperta la tendina

PRODOTTO
Nome 1
Nome 1
Nome 1
Nome 1
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Per i pallini basta che aggiungi questo al css
Codice:
ul {
        list-style-type: none;
    }
lo script funziona , controlla meglio il percorso della libreria
 

Shyson

Utente Attivo
19 Ago 2012
1.167
1
38
Per i pallini basta che aggiungi questo al css
Codice:
ul {
        list-style-type: none;
    }
lo script funziona , controlla meglio il percorso della libreria
Si funziona, ho modificato, c'è ancora una cosa da sistemare poi è a posto: avendo tolto i pallini rimane in mezzo al div, non si è spostato tutto a sx.

PHP:
<style type="text/css">
li span{
    cursor: pointer;
}
.subcat1 {
    display: show;
}
.subcat2 {
    display: none;
}
ul {
    list-style-type: none;
}
</style>

<ul id="lista">
            <li>
                <span id="1" class="menu1a">Dr. Sohrab Khoshbin</span>
                <ul class="subcat1" id="cat_1">
                    <li><a class="linkSX" href="http://sito/dottore1int1.php">Intervista1</a></li>
                    <li><a class="linkSX" href="http://sito/dottore1int2.php">Intervista2</a></li>
                </ul>
            </li>
            <li>
                <span id="2"><a class="menu1b" href="http://sito/dottore2.php">Dr. Jaromir Bertl&iacute;k</a></span>
                <ul class="subcat2" id="cat_2">
                    <li><a class="linkSX" href="http://sito/dottore2int1.php">Intervista1</a></li>
                    <li><a class="linkSX" href="http://sito/dottore2int2.php">Intervista2</a></li>
                    <li><a class="linkSX" href="http://sito/dottore2int3.php">Intervista3</a></li>
                </ul>
            </li>
        </ul> 
        <script>
             $("#lista span.menu1a").click(function() {
                     $("#lista li ul").slideUp();
                if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                 $("#cat_" + $(this).attr("id")).slideDown();          
           }
          )
             $("#lista span.menu1b").click(function() {
                   $("#lista li ul").slideUp();
              if($("#cat_" + $(this).attr("id")).css('display') == 'none')
                $("#cat_" + $(this).attr("id")).slideDown();          
         }
       )
        </script>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
metti margin e padding a zero
Codice:
ul {
    margin:0;
    padding:0;
    list-style-type: none;
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
TONY1960 [HTML] MENU VERTICALE SEMPRE VISIBILE Offerte e Richieste di Lavoro e/o Collaborazione 6
N Menu verticale semplice stile Yahoo WordPress 2
P Menu verticale con subvoci HTML e CSS 1
Artemisia Menu verticale link aperto Javascript 1
W Menu verticale animato ed espandibile HTML e CSS 0
R Come modificare un menu verticale spry con Dreamweaver Webdesign e Grafica 8
A Menu verticale con immagini Javascript 3
N menu a espansione verticale Javascript 2
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0
A [Javascript] Problemi menu bootstrap Javascript 1
A [HTML] Menu con effetto slide down HTML e CSS 0

Discussioni simili