Bootstrap Snippet animated scrollbar navigation menu using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
* 
* 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"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"animated scrollbar navigation menu"
Bootstrap 4.1.1 Snippet by sandipvala

Related: See More

Questions / Comments:

"animated scrollbar navigation menu" Bootstrap 4.1.1 Snippet by sandipvala

Related: See More

Questions / Comments:

"animated scrollbar navigation menu"
Bootstrap 4.1.1 Snippet by sandipvala