"animated scrollbar navigation menu"
Bootstrap 4.1.1 Snippet by emccoy

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>ANIMATED DROPDOWN NAVIGATION BAR WITHOUT SCROLL BAR </h2> </div> </div> <nav> <ul class="dropdown"> <li class="drop"><a href="#">Really Tall Menu</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Sed</a></li> <li><a href="#">Natus</a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Voluptas</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Malorum</a></li> <li><a href="#">Bonorum</a></li> <li><a href="#">Nemo</a></li> <li><a href="#">Quisquam</a></li> <li><a href="#">Adipisci </a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> </ul> </li> <li class="drop"><a href="#">Kinda Tall Menu</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Sed</a></li> <li><a href="#">Natus</a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Voluptas</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Malorum</a></li> <li><a href="#">Bonorum</a></li> <li><a href="#">Nemo</a></li> <li><a href="#">Quisquam</a></li> </ul> </li> <li class="drop"><a href="#">Average Menu</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> </ul> </li> <li><a href="#">No Menu</a> </li> </ul> </nav>
h2{ text-align: center; font-weight: 100; font-size: 50px; margin-bottom: 20px; margin-top: 20px; background: blue; color: white; font-weight: 600; opacity: 0.5; padding: 10px; border-radius: 15px; } nav{ width: 750px; margin: 1em auto; } ul{ margin: 0px; padding: 0px; list-style: none; } ul.dropdown{ position: relative; width: 100%; } ul.dropdown li{ font-weight: bold; float: left; width: 180px; position: relative; background: #ecf0f1; } ul.dropdown a:hover{ color: #000; } ul.dropdown li a { display: block; padding: 20px 8px; color: #34495e; position: relative; z-index: 2000; text-align: center; text-decoration: none; font-weight: 300; } ul.dropdown li a:hover, ul.dropdown li a.hover{ background: #3498db; position: relative; color: #fff; transition:0.5s ease; } ul.dropdown ul{ display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; } ul.dropdown ul li a{ display: block; color: #34495e !important; background: #eee !important; } ul.dropdown ul li a:hover{ display: block; background: #3498db !important; color: #fff !important; } ul.dropdown ul li a:hover{ display: block; background: #3498db; color: #fff; } .drop > a{ position: relative; } .drop > a:after{ content: ""; position: absolute; right: 11px; top: 46%; border-left: 10px solid transparent; border-top: 10px solid #333; border-right: 10px solid transparent; z-index: 999; } .drop > a:hover:after{ content:""; border-left: 10px solid transparent; border-top: 10px solid #fff; border-right: 10px solid transparent; }
/* * * Credits to https://css-tricks.com/long-dropdowns-solution/ * */ 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"); }); });

Related: See More


Questions / Comments: