overflow-y für ul, Blättern Sie durch die Liste
Ich habe ein problem mit meinem Menü. Ich will nur vier Menüpunkte angezeigt werden zu jeder Zeit, was bedeutet, dass, wenn es einen überlauf, es werden abgeschnitten, und die Benutzer müssen nach unten scrollen.
Ich habe versucht overflow-y
, in der Hoffnung, es zu sehen bekommen ausgeschnitten, sondern stattdessen eine horizontale Bildlaufleiste angezeigt.
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;
});
})
Hier ist ein screenshot: ich will nur "alle", "urban", "resort" und "spa" erscheint zunächst.
was Wert sind Sie Einstellung
overflow-y
? wenn Sie möchten, clip, den Sie verwenden sollten overflow-y: hidden
.
InformationsquelleAutor donysukardi | 2011-09-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht sicher, begrenzen Sie die Anzahl der Elemente, aber Sie können die Höhe und legen den overflow auf auto, also wenn es höher ist dann die angegebene Breite gibt es eine scrollbar.
Danke Kumpel, präzise und gute Antwort 🙂 hat mir geholfen out +1
InformationsquelleAutor Roman Goyenko
Schwer zu sagen, von der Frage und tüfteln (und ich kann nicht sehen das Bild), aber ich glaube, Sie brauchen
Hier ist eine gute Ressource für überlauf: http://www.brunildo.org/test/Overflowxy2.html
Meine Freude @donysukardi. Willkommen ALSO!
Wenn dies funktioniert, stellen Sie sicher, um Sie als Antwort!
InformationsquelleAutor Jason Gennaro
Ändern Sie die Höhe auf 70 und fügen Sie "overflow:auto;" zu Ihrem Menü css-Anweisung
InformationsquelleAutor James Williams