Long Dropdown Menu Creative Mode


Berbagai macam menu dropdown mempunyai fungsinya masing - masing dan macam - macam pula bentuk nya, untuk menu dropdown kali ini berfungsi untuk menu satu cabang atau satu submenu yang extra panjang namun hanya dengan mouse kita bisa mengulirkan menu yang panjang tersebut.

Dengan begitu penguna tidak perlu repot repot untuk menyescroll hanya dengan sentuhan mouse saja. penguna bisa dengan mudah memilah menu bagian bawah.

Pertama kita buat structure HTML nya terlebih dahulu,

<div id="menu-wrap">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="sub"><a href="#">About</a>
            <div class="select-wrap">
                <ul>
                    <li><a href="#">Dropdown 1</a></li>
                    <li><a href="#">Dropdown 2</a></li>
                    <li><a href="#">Dropdown 3</a></li>
                    <li><a href="#">Dropdown 4</a></li>
                    <li><a href="#">Dropdown 5</a></li>
                    <li><a href="#">Dropdown 6</a></li>
                    <li><a href="#">Dropdown 7</a></li>
                    <li><a href="#">Dropdown 8</a></li>
                    <li><a href="#">Dropdown 9</a></li>
                    <li><a href="#">Dropdown 10</a></li>
                    <li><a href="#">Dropdown 11</a></li>
                    <li><a href="#">Dropdown 12</a></li>
                    <li><a href="#">Dropdown 13</a></li>
                    <li><a href="#">Dropdown 14</a></li>
                    <li><a href="#">Dropdown 15</a></li>
                    <li><a href="#">Dropdown 16</a></li>
                    <li><a href="#">Dropdown 17</a></li>
                    <li><a href="#">Dropdown 18</a></li>
                    <li><a href="#">Dropdown 19</a></li>
                    <li><a href="#">Dropdown 20</a></li>
                    <li><a href="#">Dropdown 21</a></li>
                    <li><a href="#">Dropdown 22</a></li>
                    <li><a href="#">Dropdown 23</a></li>
                    <li><a href="#">Dropdown 24</a></li>
                    <li><a href="#">Dropdown 25</a></li>
                    <li><a href="#">Dropdown 26</a></li>
                    <li><a href="#">Dropdown 27</a></li>
                    <li><a href="#">Dropdown 28</a></li>
                    <li><a href="#">Dropdown 29</a></li>
                    <li><a href="#">Dropdown 30</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Gallery</a>
            <div class="select-wrap">
                <ul>
                    <li><a href="#">Gallery 1</a></li>
                    <li><a href="#">Gallery 2</a></li>
                    <li><a href="#">Gallery 3</a></li>
                    <li><a href="#">Gallery 4</a></li>
                    <li><a href="#">Gallery 5</a></li>
                    <li><a href="#">Gallery 6</a></li>
                    <li><a href="#">Gallery 7</a></li>
                    <li><a href="#">Gallery 8</a></li>
                    <li><a href="#">Gallery 9</a></li>
                    <li><a href="#">Gallery 10</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>


Setelah terbentuk untuk bagian HTML nya kita padukan dengan CSS agar bisa terlihat bentuk nya

#menu-wrap {
    float: left;
}
#menu-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
 position: relative;
}
#menu-wrap li {
    float: left;
    margin-right: 1px;
    position: relative;
}
#menu-wrap li:last-child {
    margin-right: 0;
}
#menu-wrap a {
 padding: 20px 50px;
    background-color: #777777;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
}
#menu-wrap li div {
 background-color: #777777;
    margin: 20px 0 0;
    opacity: 0;
    position: absolute;
    transition:0.5s;
    visibility: hidden;
    width: 200px;
}
#menu-wrap li li {
    float: none;
    margin: 0;
}
#menu-wrap li:hover > div{
    transition:0.5s;
    margin: 0;
    visibility: visible;
    opacity: 1;
    z-index:2;
}
#menu-wrap ul a:hover {
    color: #FFFFFF;
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}
#menu-wrap li:hover > a {
    color: #FFFFFF;
    background-image: linear-gradient(#04acec, #0186ba);
    background-color: #0186ba;
} 
.select-wrap{
 height:400px;
 overflow:hidden; 
}
.sub > a:after {
 content:'';
 display:inline-block;
 border:8px solid transparent;
 border-top-color:#FFFFFF;
    position: absolute;
    right: 25px;
    top: 30px;
}
#menu-wrap .sub > a{
 padding: 20px 60px 20px 40px;
}

Dan yang terhakhir bagian script nya disini kita harus mengunakan jQuery, dan masukan kode dibawah ini

jQuery( document ).ready(function($) {
 $(".select-wrap").mousemove(function(e) {
  var wrap = $(this);
  var batas = wrap.height();
  var menu = wrap.find("ul").height();
  var offset = wrap.offset();
  var relativeY = (e.pageY - offset.top);
  var prebatas = (batas - relativeY) / batas * 100;
  prebatas = 100 - prebatas;
  var hasil = menu * prebatas / 100;
  hasil = hasil - batas;
  
  var list = wrap.find("ul li").height();
  var down = menu - batas - (list*2);
  
  if(hasil >= 0){
   if(hasil > down){
    wrap.find("ul").stop().animate({"top": -menu + batas});
    }else{
    wrap.find("ul").stop().animate({"top": -hasil});
   }
   }else{
   wrap.find("ul").stop().animate({"top": 0});
  }
 });
});

Untuk DEMO LIVE

Selamat Mencoba !!