menu espandibile con i css con sottolivelli

mediasteno

Utente Attivo
25 Gen 2010
120
0
0
Ho bisogno che qualcuno mi dia una mano a perfezionare un menu. Il codice HTML è il seguente:
HTML:
<script>
    sfHover = function() {
    	var sfEls = document.getElementById("menu").getElementsByTagName("li");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<div>
      <ul id="menu">
         <li><a href="index.php">Home Page</a></li>
         <li><a href="#">L&acute;Azienda</a></li>
         <li><a href="#">Dove siamo</a>
            <ul>
              <li><a href="#">luogo</a></li>
              <li><a href="#">indicazioni</a></li>
            </ul>
         </li>

         <li><a href="dovesiamo.php">Dove Siamo</a></li>
      
         <li><a href="#">Il raccolto</a>
           <ul>
              <li>
                  <a href="#">I Vini</a>
                     <ul>
                         <li><a href="#">vino 1</a></li>
                         <li><a href="#">vino 2</a></li>
                     </ul>
              </li>
           </ul>

        </li>

        <li><a href="#">News</a></li>
        <li><a href="#">Dicono di noi</a></li>
        <li><a href="#">I nostri amici</a></li>
        <li><a href="#">Contattaci</a>
          <ul>
          <li><a href="#">produzione</a></li>
          <li><a href="#">azienda</a></li>
          </ul>
        </li>
     </ul>
</div>

e il foglio di stile collegato è il seguente:
Codice:
#menu, #menu ul {margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu principale */}
#menu {font: bold 18px Georgia, "Times New Roman", Times, serif; color: #666; text-align: center; line-height:200%}
#menu li a {text-decoration: none;  border-bottom: 1px dashed #ccc; color:#666;}

#menu a {display: block; width: 10em;}
#menu li {float:left; width: 10em;}

/*menu di secondo livello   */
#menu ul li {position: relative; border-bottom: 1px dashed #ccc;}
#menu li ul {position: absolute; width: 10em; left: -999em;}
#menu li:hover ul, #menu li.sfhover ul {left:auto;}
#menu ul li ul{position: absolute; width: 100px;  top: 0; visibility: hidden;}

#menu ul li a{display: block; overflow: auto;  font-size:14px; color: red; text-decoration: none; background: #fff; padding: 1px 5px;
              border-bottom: 0;}
#menu ul li a:visited{}
#menu ul li a:hover{background-color: grey; color: #ffffff;}

/* menu di terzo livello */
#menu li ul ul {margin: -1em 0 0 10em;}
#menu li li:hover ul, #menu li li.sfhover ul{left:auto;}
#menu li:hover ul ul, #menu li.sfhover ul ul {left: -999em;}

ora ho due problemi:
1) quando sono con il mouse sopra una voce del menu, si apre il sottomenu, ma il menu principale non si espande rimane fisso. Come posso impostare il css?
2) Volevo aggiungere un ulteriore sottomenu, ma non riesco a visualizzarlo.

In pratica voglio realizzare un menu come nell'immagine
esempio_menu.jpg
ho cercato su internet ma non ho trovato esattamente un menu che facesse al caso mio, cosi ho cercato di realizzarlo da me, ma ho scarse conoscenze di javascript.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,l'idea non è male
devi usare la proprieta display settata a none sui sottomenu e con javascript la imposti a listem-item o inline o block : fai un po di prove per vedere cosa è meglio intanto ho buttato giu due righe ispirandomi al tuo codice, dagli un occhiata
HTML:
<style>
    a {
        text-decoration: none;
        color:black;

    }
    div {
        width: 220px;
        border:1px solid red;
    }
    ul {
        margin:0;
        padding:0;
        list-style-type: none;
    }
    ul li {        
        border-bottom:1px solid red;
        background-color: #DDD;
        padding:4px;
    }
    ul li ul li {        
        border:none;
        background-color: #FFF;
    }
    ul ul, ul ul ul{
        display: none;
        margin-left:10px;
    }
</style>
<script>
    window.onload = function(){
        
        var liste = document.getElementById('menu').getElementsByTagName('li');
        
        for(var i = 0; i < liste.length; i++) {
            liste[i].onmouseover = function() {
                var submenu = this.getElementsByTagName('ul')[0];
                if(submenu) {              
                    submenu.style.display = "list-item"
                }          
            }
            liste[i].onmouseout = function() {
                var submenu = this.getElementsByTagName('ul')[0];
                if(submenu) {              
                    submenu.style.display = "none"
                }          
            }
        }
    }    
</script>
<div>
    <ul id="menu">
        <li><a href="index.php">Home Page</a></li>
        <li><a href="#">L&acute;Azienda</a></li>
        <li><a href="#">Dove siamo</a>
            <ul>
                <li><a href="#">luogo</a></li>
                <li><a href="#">indicazioni</a></li>
            </ul>
        </li>

        <li><a href="#">Il raccolto</a>
            <ul>
                <li>
                    <a href="#">I Vini</a>
                    <ul>
                        <li><a href="#">vino 1</a></li>
                        <li><a href="#">vino 2</a></li>
                    </ul>
                </li>
            </ul>

        </li>

        <li><a href="#">News</a></li>
        <li><a href="#">Dicono di noi</a></li>
        <li><a href="#">I nostri amici</a></li>
        <li><a href="#">Contattaci</a>
            <ul>
                <li><a href="#">produzione</a></li>
                <li><a href="#">azienda</a></li>
            </ul>
        </li>
    </ul>
</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
S Menu espandibile Javascript 3
W Menu verticale animato ed espandibile HTML e CSS 0
A ChildNodes e menu espandibile Javascript 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
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
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2
M [Javascript] far scomparire il menu al click Javascript 0
Kolop [HTML] Menu a colonne stessa lunghezza HTML e CSS 7

Discussioni simili