Menu verticale

  • Creatore Discussione Creatore Discussione Shyson
  • Data di inizio Data di inizio
Shyson

Shyson

Utente Attivo
19 Ago 2012
1.179
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ì
 
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
 
criric ha scritto:
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
Clicca per allargare...

Ok, provo anche questo...
 
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>
 
criric ha scritto:
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>
Clicca per allargare...

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>
 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Clicca per allargare...
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
 
criric ha scritto:
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
Clicca per allargare...
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
 
Non è meglio che la libreria me la metto in un mio file nel sito?
Clicca per allargare...
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 ha scritto:
la versione minified pesa di meno (91,2 KB)
non credo ci sia bisogno di modificarla
Clicca per allargare...
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
 
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
 
Per i pallini basta che aggiungi questo al css
Codice: 
ul {
        list-style-type: none;
    }
lo script funziona , controlla meglio il percorso della libreria
 
criric ha scritto:
Per i pallini basta che aggiungi questo al css
Codice: 
ul {
        list-style-type: none;
    }
lo script funziona , controlla meglio il percorso della libreria
Clicca per allargare...
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>
 
metti margin e padding a zero
Codice: 
ul {
    margin:0;
    padding:0;
    list-style-type: none;
}
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

TONY1960
[HTML] MENU VERTICALE SEMPRE VISIBILE
Risposte
6
Visite
2K
Offerte e Richieste di Lavoro e/o Collaborazione
Max 1
Max 1
N
Menu verticale semplice stile Yahoo
Risposte
2
Visite
2K
WordPress
Melchiorre Schifano
M
P
Menu verticale con subvoci
Risposte
1
Visite
5K
HTML e CSS
criric
criric
Artemisia
Menu verticale link aperto
Risposte
1
Visite
2K
Javascript
Artemisia
Artemisia
W
Menu verticale animato ed espandibile
Risposte
0
Visite
2K
HTML e CSS
WMStiffler
W
R
Come modificare un menu verticale spry con Dreamweaver
Risposte
8
Visite
6K
Webdesign e Grafica
roberto81
R
A
Menu verticale con immagini
Risposte
3
Visite
3K
Javascript
PoLe
PoLe
N
menu a espansione verticale
Risposte
2
Visite
3K
Javascript
nolam
N
T
problemi con dati menu a tendina
Risposte
2
Visite
1K
HTML e CSS
tregafabio
T
A
menu a tendina php
Risposte
1
Visite
1K
PHP
marino51
marino51
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
F
Menu responsive larghezza schermo
Risposte
2
Visite
1K
HTML e CSS
francescomi
F
G
Colorare menu select attraverso ricerca php
Risposte
0
Visite
1K
PHP
Gabriele_04
G
M
Creazione menu a tendina
Risposte
3
Visite
3K
Javascript
matteot
M
D
menu con submenu orizzontale
Risposte
0
Visite
2K
HTML e CSS
degadesign
D
Cosina
Menu fisso copre i titoli quando cliccati nel sommario jQuery
Risposte
4
Visite
2K
Javascript
WmbertSea
WmbertSea
G
creazione menu a tendina e invio a pagina php
Risposte
1
Visite
2K
PHP
Tommy03
Tommy03
P
Sub menu con Collapse.
Risposte
0
Visite
1K
Javascript
PaoloG
P
R
abilitare menu a tendina tramite relativa chekbox
Risposte
17
Visite
2K
PHP
R@ff@
R
L
Aiuto creazione menu mancante
Risposte
0
Visite
3K
WordPress
loreamos
L
Alto Basso