CSSとjqueryを使用して、HTMLページにドロップダウンメニューを実装しようとしています。 HTMLとJavaScriptコードのサンプルを次に示します。
<nav id="topNav">
<ul>
<li><a href="#" title="Nav Link 1">Menu 1</a></li>
<li>
<a href="#" title="Nav Link 2">Menu 2</a>
<ul>
<li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
<li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
<li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
<li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
<li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
</ul>
</li>
<li>
<a href="#" title="Nav Link 3">Menu 3</a>
</li>
</ul>
</nav>
JavaScriptコードは次のとおりです。
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).click(function() {
$(this).find("ul").stop(true, true).slideToggle();
});
}
});
プログラムでメニューにコンテンツを追加します。ドロップダウンメニューのコンテンツが大きくなりすぎたときに、ドロップダウンメニューをスクロール可能にしたいと思います。
これどうやってするの?
css
を使用してこれを試してください。
#topNav ul li ul{
max-height:250px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
CSSプロパティmax-height
使用できます:
#topNav ul ul{
max-height:150px; // you choice of number in pixels
overflow-x:hidden; // hides the horizontal scroll
overflow-y:auto; // enables the vertical scroll
}
cSSスタイルを使用:
#topNav{
overflow:scroll;
}
純粋なCSSソリューションを使用しないのはなぜですか?
トランジションプロパティを変更して、好みのスライドのアニメーションのスタイルとmax-height
値は、スクロールが発生する前のドロップダウンのサイズを制限します。
HTML
<ul id='menu'>
<li>item</li>
<li>item</li>
<li>dropdown
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
CSS
body, html {
width:100%;
}
ul {
list-style:none;
margin:0;
padding:0
}
#menu > li {
display:inline-block;
border:1px solid grey;
position:relative;
}
#menu li ul {
position:absolute;
border:1px solid grey;
width:100%;
max-height:0;
overflow:hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#menu li:hover ul {
overflow:auto;
max-height:50px;
}
高さを設定してからオーバーフローすることはできませんか?CSS、プロパティとしてautoとスクロールが自動的に表示されますか?