Creazione di un semplice menu multilivello CSS

Sto tentando di creare una pagina Web con una funzionalità di navigazione ESATTAMENTE come questa: http://www.rex-ny.com/ in cui si fa clic su un elemento dell'elenco e gli elementi figli appaiono e rimangono.Creazione di un semplice menu multilivello CSS

Posso farlo con il passaggio del mouse, ma non riesco a capire come farlo rimanere quando non si libra.

Sembra che la cosa più semplice sia la più difficile da fare.

<ul id="menu"> 
    <li><a href="#">Menu 1</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 2</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
</ul>

Grazie

Ecco un jsfiddle http://jsfiddle.net/phzuC/

fonte

2013-08-29 user2730793

Puoi pst un violino del vostro esempio in bilico e poi uno di noi forse renderlo cliccabile – Vector

Ecco la jsfiddle http://jsfiddle.net/phzuC/ – user2730793

@ user2730793 Non funzionerà. Non appena si rilascia il mouse, il menu scompare. – ninty9notout

Ecco un CSS unica soluzione come l'OP richiesto, utilizzando tabindex

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/

#menu li > ul { 
    display:none; 
} 

#menu li:focus > ul { 
    display:block; 
} 
li { 
    outline: 0; 
}

a cura

Ecco una soluzione jQuery nel caso aveste bisogno. Mantiene aperti i sottomenu ed è semplice da implementare. 11 righe di codice.

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/

$(document).ready(function() { 
    $(".nav-top > li").click(function(e) { 
    if($(this).find('ul').hasClass('expanded')) { 
     $(this).find('ul').removeClass('expanded').hide(); 
    } else { 
    $(this).find('ul').addClass('expanded').show(); 
    } 
    }); 
    $('.nav-top a').click(function(e){ 
    e.preventDefault(); 
    }); 
});

fonte

2013-08-29 21:13:22 Vector

Questo tipo è un genio! –

Probabilmente dovresti rimuovere l'attributo href dai pulsanti "Menu *". Anche questo smetterà di funzionare dopo aver fatto clic sui collegamenti interni. – Itay

Questa è una buona soluzione.L'OP dovrà scendere a compromessi nascondendosi non appena il collegamento di primo livello perde l'attenzione, ma per riutilizzare le parole di TheApptracker, questo è geniale! – ninty9notout

Ecco un altro CSS unica soluzione che utilizza sia:

caselle di controllo se si desidera che i menu per attivare al clic
pulsanti di opzione se si desidera che i menu per chiusura automatica quando viene selezionato un altro

Riferimento:

Demo

comportamenti CSS di base (la demo ha più styling per rimuovere l'elenco predefinito di indentazione/proiettili):

.sideMenu input[type='radio'], 
.sideMenu input[type='checkbox'] { 
    display: none; 
} 
.sideMenu input[type='radio'] + ul, 
.sideMenu input[type='checkbox'] + ul { 
    position: relative; 
    display: none; 
} 
.sideMenu input[type='radio']:checked + ul, 
.sideMenu input[type='checkbox']:checked + ul { 
    display: block; 
}

HTML (può essere arbitrariamente profondo):

<nav class="sideMenu"> 
    <ul> 
     <li> 
      <label for="menu1">Menu 1</label> 
      <input id="menu1" type="checkbox" name="menu1"> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
     </li> 
     <!-- repeat --> 
    </ul> 
</nav>

fonte

2013-08-29 21:31:07 dc5

Creazione di un semplice menu multilivello CSS

risposta

Problemi correlati