overflow-y for ul, scroll down the list
12,753
Solution 1
Not sure you can limit the number of elements, but you can set the height and set the overflow to auto, so if it's higher then specified width there will be a scrollbar.
<ul class="inner-ul">
<li><a href="#!project/current/all">all</a></li>
<li><a href="#!project/current/urban">urban</a></li>
<li><a href="#!project/current/resort">resort</a></li>
<li><a href="#!project/current/spa">spa</a></li>
<li><a href="#!project/current/restaurant">restaurant</a></li>
<li><a href="#!project/current/restaurant">others</a></li>
</ul>
.inner-ul {
height:50px;
overflow-y: auto;
}
Solution 2
Hard to tell from the question and fiddle (and I can't see the image) but I think you need
overflow-x: auto;
Here's a good resource for overflow: http://www.brunildo.org/test/Overflowxy2.html
Related videos on Youtube
Author by
donysukardi
Updated on June 04, 2022Comments
-
donysukardi over 1 year
I have a problem with my menu. I only want four menu items to appear at any time, meaning that if there’s an overflow, it’ll be clipped, and the user will have to scroll down.
I tried setting
overflow-y
, hoping to see it get clipped, but instead, a horizontal scroll bar appears.HTML
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" /> <link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" /> <div class="container"> <div id="menu"> <ul> <li><a href="#" id="profile">profile</a> <ul> <li><a href="#!profile/overview.html" id="overview">overview</a></li> <li><a href="#" id="partners">partners</a> <ul> <li><a href="#!profile/partners/lim.html" id="lim">Lim Hong Lian</a></li> <li><a href="#!profile/partners/teo.html" id="teo">Teo Su Seam</a></li> <li><a href="#!profile/partners/marina.html" id="marina">Marina Baracs</a></li> </ul> </li> <li><a href="#" id="associates">associates</a> <ul> <li><a href="#!profile/associates/yang.html" id="yang">Jocelyn Yang Liwan</a></li> <li><a href="#!profile/associates/tsai.html" id="tsai">Tsai Ming Ming</a></li> </ul> </li> <li><a href="#!profile/team.html" id="team">team</a></li> </ul> </li> <li><a href="#">projects</a> <ul> <li><a href="#">featured projects</a> <ul> <li><a href="#">HELLO</a></li> </ul> </li> <li><a href="#">project list</a> <ul> <li><a href="#">current</a> <ul> <li><a href="#!project/current/all">all</a></li> <li><a href="#!project/current/urban">urban</a></li> <li><a href="#!project/current/resort">resort</a></li> <li><a href="#!project/current/spa">spa</a></li> <li><a href="#!project/current/restaurant">restaurant</a></li> <li><a href="#!project/current/restaurant">others</a></li> </ul> </li> <li><a href="#">completed</a></li> </ul> </li> </ul> </li> <li><a href="#">publications</a> <ul> <li><a href="#">books</a></li> <li><a href="#">magazines</a></li> </ul> </li> <li><a href="#">contacts</a> <ul> <li><a href="contact_singapore.html">Singapore</a></li> <li><a href="contact_milan.html">Milan</a></li> <li><a href="contact_beijing.html">Beijing</a></li> </ul> </li> </ul> </div> </div>
CSS
#menu ul { list-style-type:none; position:absolute; padding: 5px 0px; margin:0px; width:100px; } #menu { position:relative; border-top-color:#afafaf; border-top-style:solid; border-top-width: thin; font-size: 11px; margin-top:5px; height:80px; } #menu ul ul { display:none; position:absolute; padding:5px 0px; left:150px; top:0px; height:80px; }
Javascript (jQuery)
$(document).ready(function(){ $('#menu ul li a').click(function(){ if(!$(this).hasClass('current')) { var relatives = $(this).parent().siblings(); relatives.find('ul').css('left',150).hide(); relatives.find('.current').removeClass('current'); $(this).siblings().animate({'left':'-=20', 'opacity':'toggle'},'slow'); $(this).addClass('current'); if($(this).attr("href") != "#"){ var url = $(this).attr("href").split('#!')[1]; $('#content').slideUp('slow', function(){$(this).load(url, function(){$(this).slideDown('slow')});}) window.location = base_url+url; } } $(this).parent().siblings().find('.black').removeClass('black'); $(this).addClass('black'); return false; }); })
Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.
-
donysukardi about 12 yearsoh wow, it actually works! i think i tried to do something like this, but i put the css at the wrong element. thank you so much Romario!
-
donysukardi about 12 yearsthanks for the reference and helping me edit my post. i'm new here, so I couldn't attach any image yet
-
Jason Gennaro about 12 yearsMy pleasure @donysukardi. Welcome to SO!
-
Remy Sheppard about 9 yearsIf this works, make sure to select it as the answer!