Making a drop-down menu scrollable
59,481
Solution 1
Try this using css
like,
#topNav ul li ul{
max-height:250px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
Solution 2
There is a css property max-height
you can use it:
#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
}
Solution 3
Why not use a purely CSS solution?
FIDDLE
You can change the transition property to have the style of animation for the slide you prefer, and the max-height
value to limit the size of the dropdown before scrolling occurs.
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;
}
Solution 4
use CSS style:
#topNav{
overflow:scroll;
}
Author by
siva82kb
I am a lecturer in Bioengineering at the Christian Medical College Vellore.
Updated on February 24, 2020Comments
-
siva82kb about 4 years
I am trying to implement a drop down menu in a HTML page using CSS and jquery. Here is a sample of the HTML and javascript code.
<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>
Here is the Javascript code:
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 will be adding content to menu programmatically, and I want the dropdown menus to be scrollable when the content of the dropdown menu gets too large.
How can I do this?