我想在CSS頁面中使用CSS和jQuery來實現下拉菜單。以下是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(); 
     }); 
    } 
});

我會通過編程將內容添加到菜單，和我想的下拉菜單可滾動的時候下拉菜單的內容變得太大。

我該怎麼做？

來源

2014-02-24 siva82kb

此鏈接可能有助於您http://css-tricks.com/long-dropdowns-solution/ – Sam1604

@ Sam1604物品爲從2009年開始它仍然是最先進的？ – user151841

試試這個使用css一樣，

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

Demo

來源

2014-02-24 09:41:21

打我吧：）http://jsfiddle.net/83q7g/ - 我添加了'overflow-y：scroll' –

auto是更好的yes'overflow-y：auto' –

@RobSedgwick yes'auto'更好，如果你設置了「scroll」，那麼總是有一個'scroller'的availbale，不管你的元素高度是否超過。 –

使用CSS樣式：

#topNav{ 
    overflow:scroll; 
}

來源

2014-02-24 09:41:31

是不是可以設置一個高度，然後溢出：汽車，如CSS一個屬性？和滾動會自動出現？

來源

2014-02-24 09:42:06 user256631

有一個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 
}

來源

2014-02-24 09:46:41 Jai

爲什麼不使用純CSS的解決方案？

FIDDLE

您可以更改過渡性質有動畫你喜歡的幻燈片的風格，滾動發生前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; 
}

來源

2014-02-24 09:51:51 SW4

製作滾動下拉菜單

回答

FIDDLE

相關問題