CODEWITHSUNDEEP
htmlcsshtml-lists
donysukardi
donysukardi

Reputation: 319

overflow-y for ul, scroll down the list

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;
    });
})

Demo on JS Fiddle.

Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.

Screenshot of menu

Upvotes: 4

Views: 13458

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

Upvotes: 2

Roman Goyenko
Roman Goyenko

Reputation: 7070

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;
}

Upvotes: 5

James Williams
James Williams

Reputation: 4216

Change height to 70px and add "overflow:auto;" to your menu css statement

Upvotes: 0

Related Questions