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](https://www.jqueryscript.net/images/Cool-List-Scrolling-Effect-with-jQuery-CSS3.jpg)
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.