Erstellen eines Drop-down-Menüs scrollbar

Question

Ich versuche, ein Dropdown-Menü in einer HTML-Seite mit CSS und Jquery zu implementieren. Hier ist ein Beispiel des HTML- und JavaScript-Codes.

<nav id="topNav"> 
    <ul> 
    <li><a href="#" title="Nav Link 1">Menu 1</a></li> 
    <li> 
     <a href="#" title="Nav Link 2">Menu 2</a> 
     <ul> 
     <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li> 
     <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li> 
     <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li> 
     <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li> 
     <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#" title="Nav Link 3">Menu 3</a> 
    </li> 
    </ul> 
</nav> 

Hier ist der Code Javascript:

var nav = $("#topNav"); 

//add indicators and hovers to submenu parents 
nav.find("li").each(function() { 
    if ($(this).find("ul").length > 0) { 

     $("<span>").text("^").appendTo($(this).children(":first")); 

     //show subnav on hover 
     $(this).click(function() { 
      $(this).find("ul").stop(true, true).slideToggle(); 
     }); 
    } 
}); 

I Inhalt zum Menü programmatisch hinzugefügt werden, und ich mag, dass die Drop-Down-Menüs scrollbaren sein, wenn der Inhalt des Drop-Down-Menüs zu groß wird.

Wie kann ich das tun?

Answer 1

Versuchen Sie dies mit css wie

#topNav ul li ul{ 
    max-height:250px;/* you can change as you need it */ 
    overflow:auto;/* to get scroll */ 
} 

Demo

Answer 2

Verwendung CSS-Stil:

#topNav{ 
    overflow:scroll; 
} 

Answer 3

Ist es nicht möglich, eine Höhe zu setzen und dann Überlauf: Auto, wie CSS Ein Besitz? und die Schriftrolle wird automatisch angezeigt?

Answer 4

Es gibt eine CSS-Eigenschaft max-height Sie es verwenden können:

#topNav ul ul{ 
    max-height:150px; // you choice of number in pixels 
    overflow-x:hidden; // hides the horizontal scroll 
    overflow-y:auto; // enables the vertical scroll 
} 

Answer 5

Warum nicht eine rein CSS-Lösung verwenden?

FIDDLE

Sie können den Übergang Eigenschaft ändern Sie die Art der Animation für die Folie haben Sie es vorziehen, und die max-height Wert die Größe des Dropdown zu begrenzen, bevor Scrollen auftritt.

HTML

<ul id='menu'> 
    <li>item</li> 
    <li>item</li> 
    <li>dropdown 
     <ul> 
      <li>item</li> 
      <li>item</li> 
      <li>item</li> 
      <li>item</li> 
      <li>item</li> 
      <li>item</li> 
      <li>item</li> 
     </ul> 
    </li> 
</ul> 

CSS

body, html { 
    width:100%; 
} 
ul { 
    list-style:none; 
    margin:0; 
    padding:0 
} 
#menu > li { 
    display:inline-block; 
    border:1px solid grey; 
    position:relative; 
} 
#menu li ul { 
    position:absolute; 
    border:1px solid grey; 
    width:100%; 
    max-height:0; 
    overflow:hidden; 
    -moz-transition: 1s; 
    -ms-transition: 1s; 
    -o-transition: 1s; 
    -webkit-transition: 1s; 
    transition: 1s; 
} 
#menu li:hover ul { 
    overflow:auto; 
    max-height:50px; 
}