Cool List Scrolling Effect with jQuery and CSS3

With jQuery, CSS3 and a little bit of Javascript, we can create a list box that expands a drop down list with a cool mouse movement direction-aware scrolling effect.

How to use it:

1. Create a dropdown list using Html unordered lists as follows.

<ul class="dropdown">
  <li><a class="btn" href="#">8 Items</a>
    <ul class="sub_menu">
      <li><a href="#"><span class="item-name">List Item 1</span><span class="item-description">Description 1</span></a></li>
      <li><a href="#"><span class="item-name">List Item 2</span><span class="item-description">Description 2</span></a></li>
      <li><a href="#"><span class="item-name">List Item 3</span><span class="item-description">Description 3</span></a></li>
      <li><a href="#"><span class="item-name">List Item 4</span><span class="item-description">Description 4</span></a></li>
      <li><a href="#"><span class="item-name">List Item 5</span><span class="item-description">Description 5</span></a></li>
      <li><a href="#"><span class="item-name">List Item 6</span><span class="item-description">Description 6</span></a></li>
      <li><a href="#"><span class="item-name">List Item 7</span><span class="item-description">Description 7</span></a></li>
      <li><a href="#"><span class="item-name">List Item 8</span><span class="item-description">Description 8</span></a></li>
    </ul>
  </li>
</ul>

2. The core CSS to style the dropdown list.

ul.dropdown {
  position: relative;
  width: 100%;
}

ul.dropdown li {
  float: left;
  width: 100%;
  background: #fff;
  position: relative;
  transition: all 0.4s ease;
}

ul.dropdown a:hover { color: #000; }

ul.dropdown li a {
  display: block;
  padding: 20px;
  color: #222;
  position: relative;
  z-index: 2000;
  font-size: 14px;
}

ul.dropdown li a:hover,
ul.dropdown li a.hover {
  background: #1abc9c;
  position: relative;
}

ul.dropdown ul {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

ul.dropdown ul li {
  color: #fff;
  border-bottom: 1px solid #fff;
}

ul.dropdown ul li a {
  display: block;
  background: #fff !important;
}

ul.dropdown ul li a:hover {
  display: block;
  background: rgba(26, 188, 156,0.1) !important;
}

.item-name { margin-left: 20px; }

.item-name:before {
  display: inline;
  position: absolute;
  font-weight: 700;
  margin-left: -20px;
}

.item-description {
  margin-left: 30px;
  color: #999;
}

3. Include the necessary JQuery library at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. The jQuery script to enable the cool list scrolling effect. Add the following JS snippet in your JS file and done.

var maxHeight = 270;

$(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");

});

});

---

This awesome jQuery plugin is developed by victort. For more Advanced Usages, please check the demo page or visit the official website.