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

Share:
12,753

Related videos on Youtube

donysukardi
Author by

donysukardi

Updated on June 04, 2022

Comments

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

    Demo on JS Fiddle.

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

    Screenshot of menu

  • donysukardi
    donysukardi about 12 years
    oh 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
    donysukardi about 12 years
    thanks for the reference and helping me edit my post. i'm new here, so I couldn't attach any image yet
  • Jason Gennaro
    Jason Gennaro about 12 years
    My pleasure @donysukardi. Welcome to SO!
  • Remy Sheppard
    Remy Sheppard about 9 years
    If this works, make sure to select it as the answer!