Cool List Scrolling Effect with jQuery and CSS3

File Size: 2.71 KB
Views Total: 1968
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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="//"></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;


$(".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
$"origHeight", $container.height());

// so it can retain it's rollover color all the while the dropdown is open

// make sure dropdown appears directly below parent list item
paddingTop: $"origHeight")

// don't do any animation if list shorter than max
if (multiplier > 1) {
height: maxHeight,
overflow: "hidden"
.mousemove(function(e) {
var offset = $container.offset();
var relativeY = ((e.pageY - * multiplier) - ($"origHeight") * multiplier);
if (relativeY > $"origHeight")) {
$list.css("top", -relativeY + $"origHeight"));

}, function() {

var $el = $(this);

// put things back to normal
.css({ top: 0 })



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