Dodaj pasek przewijania w opcjach menu rozwijanego

Question

Próbuję dodać pasek przewijania do opcji menu rozwijanego, więc gdy użytkownik kliknie menu, nie wyświetli wszystkich opcji do końca. Próbowałem

<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> 

Próbuję tego css, ale działa tylko w menu, a nie opcji.

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

Jakieś myśli? Wielkie dzięki.

Answer 1

To także ja miły sposób handeling to :)

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

z linku powyżej:

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

dać css do Twojego wybierz jak class="myDropDown" i dodaj następujący CSS

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

dla odniesienia: 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>