CSS - elenco affiancato per evitare scorrimento pagina

di il
1 risposte

CSS - elenco affiancato per evitare scorrimento pagina

Ho un menu a tendina senza javascript formato da elenchi annidati, il problema è che è abbastanza lungo: vorrei (sia nelle categorie principali che nelle sottocategorie) che se tutti gli elementi di un elenco non ci stanno nella pagina, venissero affiancati a dx.
E' possibile fare una cosa del genere? (eventualmente anche usando javascript/jquery se non troppo complicato... non sono linguaggi che conosco bene)

Avevo provato anche a fissare il menu in alto, ma così risolvo il problema solo per le categorie, non per le sottocategorie...

Allego immagine...

1 Risposte

  • Re: CSS - elenco affiancato per evitare scorrimento pagina

    Fai tutto con i CSS3, dali ennetti in conparsa al posizionamento del sotto menu.
    con i CSS avresti avuto diversi problemi, Ma dal CSS2 in poi

    qualcosa tipo:
    <style >
     .secondoLivello {position:relative; float:left; width:180px; padding:10px 5px 10px 5px;border:1px solid red; }
     .secondoLivello div { float:right;}
    .terzoLivello {position:absolute; display:none; left:158px; width:200px; background:red;animation-duration: 10s;  }
    
     .secondoLivello dd:hover .terzoLivello{display:block;animation-duration: 10s;}
    .terzoLivello:hover{display:block;animation-duration: 10s;}
    
    </style>
    
    <dl class="secondoLivello" >
       <dd><a href="##">Senza terzo livello 1</a></dd>  
    <dd>Con terzo Livello</a><div><dl class="terzoLivello"> <dd> <a href="##">sottovoce 1</a> </dd> <dd><a href="##">Soccovoce 2</a></dd> <dd><a href="##">Sottovoce 3</a> </dd> <dd><a href="##">sottovoce 4</a></dd></dl><a href="##"><div></dd>
       <dd><a href="##">Senza terzo livello 2</a></dd>  
       <dd><a href="##">Senza terzo livello 3</a></dd>  
    <dd>Con terzo Livello</a><div><dl class="terzoLivello"> <dd> <a href="##">sottovoce 1</a> </dd> <dd><a href="##">Soccovoce 2</a></dd> <dd><a href="##">Sottovoce 3</a> </dd> <dd><a href="##">sottovoce 4</a></dd></dl><a href="##"><div></dd>
       <dd><a href="##">Senza terzo livello 4</a></dd>  
       <dd><a href="##">Senza terzo livello 5</a></dd>  
       <dd><a href="##">Senza terzo livello 6</a></dd>  
    <dd>Con terzo Livello</a><div><dl class="terzoLivello"> <dd> <a href="##">sottovoce 1</a> </dd> <dd><a href="##">Soccovoce 2</a></dd> <dd><a href="##">Sottovoce 3</a> </dd> <dd><a href="##">sottovoce 4</a></dd></dl><a href="##"><div></dd>
       
       
    </dl>
    volevo scrivere anche qualche effetto in comparsa ma lascio a te la fantasia...

    Se no usa jquery o se vuoi appesantire ancora di più la pagina angularJS
Devi accedere o registrarti per scrivere nel forum
1 risposte