2011-01-05 23 views
5

Aquí está mi ejemplo HTML.Cómo desplazar elementos LI a una altura fija UL?

Y quiero tener scroll para mis elementos LI.

Que son de 2 niveles. Significa, quiero aplicar clase en cada UL.

Entonces, ¿cómo puedo hacer eso. Mediante el uso de ajustes de JQuery o CSS.

PD: Estoy usando esto example.

<ul id="nav" class="dropdown"> 
<li class="dir"> 
    Item_Root 
    <ul> 
     <li class="dir"> 
      Item_1_Level 
      <ul> 
       <li>Item_Level_2</li> 
       <li>Item_Level_2</li> 
       <li>Item_Level_2</li> 
       <li>.... up to N items</li> 
      </ul> 
     </li> 
     <li>Item_Level_1</li> 
     <li>Item_Level_1</li> 
     <li>Item_Level_1</li> 
     <li>Item_Level_1</li> 
     <li>.... up to N items</li> 
    </ul> 
</li> 

</ul> 
+0

¿Qué has intentado hasta ahora? ¿Qué salió mal? ¿Qué tamaño debería tener el '-sul'? El ejemplo al que se ha vinculado es un menú desplegable/desplegable; ¿Cómo se relaciona eso con lo que quieres? –

Respuesta

19

Con su margen de beneficio publicado, y la mejor conjetura que podría hacer de la intención de su pregunta (su título en realidad no coincida con el ejemplo se enlazó a), me encontré con esto:

#nav { 
    width: 12em; 
    height: 20em; 
    line-height: 2em; 
    border: 1px solid #ccc; 
    padding: 0; 
    margin: 0; 
    overflow: scroll; 
    overflow-x: hidden; 
} 

li { 
    border-top: 1px solid #ccc; 
} 

ul ul { 
    text-indent: 1em; 
} 

ul ul ul { 
    text-indent: 2em; 
} 

JS Fiddle Demo.

+0

Gracias David, relacioné el ejemplo porque lo sigo. Y podría tener n cantidad de elementos en mi LI. Y lo mismo es el caso con UL de segundo nivel. De hecho, muchos elementos LI causan desplazamiento en mi página web. No quiero dejar que el navegador se desplace. Pero mis artículos en LI. Y para más, quiero que Mousemove se desplace hacia arriba y se desplace hacia abajo. Me costó encontrar ayuda para desplazar mis elementos LI en UL. Aprecio si puedo ver ayuda sobre eso. –

+0

¿Desea que los artículos 'ul' de segundo nivel estén en la misma 'caja' que el' ul' de primer nivel, o quiere que salgan volando, como en el ejemplo al que se vincula? ¿O los quiere ocultos, y * luego * aparecen en la misma 'caja' que los artículos de primer nivel 'ul'? –

+0

David Quiero que floten. Y tienen el mismo comportamiento de desplazamiento en ellos. Similar al ejemplo. Lo único con el ejemplo es que no tiene suficiente valor para tener ese escenario. El menú del nivel 1 se desplegará y el menú del nivel 2 flotará. Cómo puedo lograrlo Gracias por responder. –

5

La idea principal es establecer una altura fija para la lista de UL, y añadir

overflow: scroll; 

Tal vez usted también tendrá que ajustar el ancho de UL, ya que la barra de desplazamiento se necesita algún espacio extra.

Cuestiones relacionadas