CSS - elenco affiancato per evitare scorrimento pagina

Forum di discussione su HTML5, CSS, XHTML, XML, XSL

Moderatore: Toki

Regole del forum
Leggi: IProgrammatori.it - Regolamento Forum
ali7.p
New Entry
Messaggi: 1
Iscritto il: 22 mar 2011, 18:08

CSS - elenco affiancato per evitare scorrimento pagina

Messaggioda ali7.p » 05 gen 2017, 11:25

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...

Immagine
Avatar utente
aleWEB
Utente Junior
Messaggi: 31
Iscritto il: 27 gen 2017, 16:43

Re: CSS - elenco affiancato per evitare scorrimento pagina

Messaggioda aleWEB » 20 mar 2017, 22:23

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:

Codice: Seleziona tutto

<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
--------------------------------
Tutto va imparato non per esibirlo ma per adoperarlo.
(De Vauvenargues)
Ad ogni periodo di attività deve seguirne uno di riposo.
(Mao Tse-tung)

Torna a “HTML e CSS”

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti