CSS - elenco affiancato per evitare scorrimento pagina

di
ali7.p
il
1 risposte
A
ali7.p
Pochi posts
Iscritto da
mar, 2011
Messaggi:
1

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

  • aleWEB
    aleWEB
    Pochi posts
    Iscritto da
    gen, 2017
    Messaggi:
    42

    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