web-dev-qa-db-ja.com

ドロップダウンメニューをスクロール可能にする

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

プログラムでメニューにコンテンツを追加します。ドロップダウンメニューのコンテンツが大きくなりすぎたときに、ドロップダウンメニューをスクロール可能にしたいと思います。

これどうやってするの？

javascriptjqueryhtmlcssdrop-down-menu
8
siva82kb

cssを使用してこれを試してください。

#topNav ul li ul{
   max-height:250px;/* you can change as you need it */
   overflow:auto;/* to get scroll */
}

デモ

29
Rohan Kumar

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
}
4
Jai

cSSスタイルを使用：

#topNav{
    overflow:scroll;
}
1
Chethan N

純粋な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;
}
0
SW4

高さを設定してからオーバーフローすることはできませんか？CSS、プロパティとしてautoとスクロールが自動的に表示されますか？

0
user256631