Thêm thanh cuộn trên các tùy chọn menu thả xuống

Question

Tôi đang cố gắng thêm thanh cuộn vào một tùy chọn menu thả xuống để khi người dùng nhấp vào menu, nó sẽ không hiển thị tất cả các tùy chọn cho đến khi kết thúc. Tôi đã thử

<select name='menu'> 
    <option value='1'>first item</option> 
    <option value='2'>second item</option> 
    <option value='3'>third item</option> 
    <option value='4'>fourth item</option> 
    <option value='5'>fifth item</option> 
    <option>........ 
    <option>........ 
    //I have many options..... 
</select> 

Tôi thử css này nhưng nó chỉ hoạt động trên chính trình đơn chứ không phải tùy chọn.

select { 
height:50px; 
overflow-y: scroll; 
} 

Bạn nghĩ gì? Cảm ơn rất nhiều.

Answer 1

Đây cũng là tôi cách tốt đẹp của handeling nó :)

http://css-tricks.com/long-dropdowns-solution/

Từ liên kết ở trên:

var maxHeight = 400; $(function(){ 

$(".dropdown > li").hover(function() { 

    var $container = $(this), 
     $list = $container.find("ul"), 
     $anchor = $container.find("a"), 
     height = $list.height() * 1.1,  // make sure there is enough room at the bottom 
     multiplier = height/maxHeight;  // needs to move faster if list is taller 

    // need to save height here so it can revert on mouseout    
    $container.data("origHeight", $container.height()); 

    // so it can retain it's rollover color all the while the dropdown is open 
    $anchor.addClass("hover"); 

    // make sure dropdown appears directly below parent list item  
    $list 
     .show() 
     .css({ 
      paddingTop: $container.data("origHeight") 
     }); 

    // don't do any animation if list shorter than max 
    if (multiplier > 1) { 
     $container 
      .css({ 
       height: maxHeight, 
       overflow: "hidden" 
      }) 
      .mousemove(function(e) { 
       var offset = $container.offset(); 
       var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier); 
       if (relativeY > $container.data("origHeight")) { 
        $list.css("top", -relativeY + $container.data("origHeight")); 
       }; 
      }); 
    } 

}, function() { 

    var $el = $(this); 

    // put things back to normal 
    $el 
     .height($(this).data("origHeight")) 
     .find("ul") 
     .css({ top: 0 }) 
     .hide() 
     .end() 
     .find("a") 
     .removeClass("hover"); 

}); 

// Add down arrow only to menu items with submenus 
$(".dropdown > li:has('ul')").each(function() { 
    $(this).find("a:first").append("<img src='images/down-arrow.png' />"); 
}); 

});

Answer 2

cho một css để chọn bạn như class="myDropDown" và thêm css sau

.myDropDown 
{ 
    height: 50px; 
    overflow: auto; 
} 

để tham khảo: fiddle

Answer 3

<style type="text/css"> 
      /*dropdown menu code start*/ 
      @media only screen and (min-width:769px) { 
       .dropdown:hover .dropdown-menu { 
        display: block; 
       } 
       .dropdown-submenu { 
        position: relative !important; 
       } 

       .dropdown-submenu>.dropdown-menu { 
        top: 0 !important; 
        left: 100% !important; 
        margin-top: -6px !important; 
        margin-left: -1px !important; 
        border-radius: 0 !important; 
       } 

       .dropdown-submenu:hover>.dropdown-menu { 
        display: block !important; 
       } 

       .dropdown-submenu>a:after { 
        display: block; 
        content: "\f105"; 
        font-family: 'FontAwesome'; 
        margin-top: -18px; 
        right: 15px; 
        position: absolute; 
        font-weight: 300; 
       } 
       .customcaret{ 
       float: right; 
       } 
      } 
      /*dropdown menu code start*/ 

     .navbar-default .navbar-nav > li > a { 
      color: #535353; 
      transition: all ease 0.5s; 
      -webkit-transition: all ease 0.5s; 
      -moz-transition: all ease 0.5s; 
      font-size: 1.15em !important; 
      text-transform: uppercase; 
     } 
     </style>