Menu – Mostra i sottomenu sotto l’intero Menuitems – HTML / CSS

I menu menu sono simili a questo con display: inline-block; & padding-right:10px per metterli in una riga

Voci del menu Sono in una “architettura ul / li” che assomiglia a questo:

   

Ora sto cercando di creare un sottomenu che dovrebbe apparire come questo: Menu con sottomenu Questo è quello che dovrebbe succedere se clicchi sulla lampadina. Quindi dovrebbe spingere verso il basso il contenuto dell’intera pagina e posizionarsi sotto i menu. Come posso fare questo? L’ho provato inserendo una ul in li con la lampadina e l’ho provata per ottenerla via css. È ansible ma il sottomenu è in un’altra posizione ma è anche collegato al menu principale?

Non so se vuoi assolutamente usare ul li . In caso contrario, questo è come lo farei senza javascript. Vorrei utilizzare l’etichetta con la casella di controllo nascosta e utilizzare lo stato attivo per mostrare / hide un div sotto. Quindi puoi modellarli facilmente con i CSS. Questo spingerà il contenuto verso il basso e mostrerà quello che vuoi. In questo caso, il tuo sottomenu verrà visualizzato sotto l’immagine spingendo il contenuto verso il basso.

Ecco un jsfiddle.

Spero che sia d’aiuto!

Come sopra nelle domande: Menuitems:

 
...

Dopodichè:

 
...

E tramite il foglio di stile: display:none sui submenuitems. ora puoi cambiare l’intera cosa con jquery:

 $(document).ready( function() { $("#info").click(function() { $("#infosub").toggle(1000); }); $("#foto").click(function() { $("#fotosub").toggle(1000); }); $("#security").click(function() { $("#securitysub").toggle(1000); }); }); 

Il commutatore da 1000 in () indica la velocità con cui verrà nascosta o visualizzata (1000 ms).

Con alcuni CSS per i Sottomenuem il lato appare esattamente come lo screenshot qui sopra – spero che ti possa aiutare.

Domi