переполнение для y, прокрутите вниз список - PullRequest
Новая
       12

переполнение для y, прокрутите вниз список

4 голосов
/ 30 сентября 2011

У меня проблема с моим меню. Я хочу, чтобы в любое время отображались только четыре пункта меню, а это означает, что в случае переполнения оно будет обрезано, и пользователю придется прокрутить вниз.

Я попытался установить overflow-y, надеясь увидеть его обрезку, но вместо этого появляется горизонтальная полоса прокрутки.

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

Демонстрация JS Fiddle .

Вот снимок экрана: я хочу, чтобы изначально отображались только «все», «городской», «курорт» и «спа».

Screenshot of menu

Ответы [ 3 ]

5 голосов
/ 01 октября 2011

Не уверен, что вы можете ограничить количество элементов, но вы можете установить высоту и установить переполнение на автоматический, поэтому, если оно больше указанной ширины, будет полоса прокрутки. 

            <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;
}
2 голосов
/ 01 октября 2011

Трудно сказать по вопросу и скрипке (и я не вижу изображения), но я думаю, что вам нужно 

overflow-x: auto;

Вот хороший ресурс для переполнения: http://www.brunildo.org/test/Overflowxy2.html

0 голосов
/ 01 октября 2011

Измените высоту на 70px и добавьте «overflow: auto;»в ваше меню css

...