Some time we will have a very long dropdown menu items in Website sticky menu and we cannot access most the menu on the dropdown. Yes, you must face this kind of issue once in your web development era. You might be skipped to different menu option in that case.
Now You are worrying even if it is a very very long menu. I have solution for you to scroll the menu even the menu is sticky.
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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" }) .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"); }); // Add down arrow only to menu items with submenus $(".dropdown > li:has('ul')").each(function() { $(this).find("a:first").append("<img src='images/down-arrow.png' />"); }); |
always i used to read smaller articles or reviews which also clear their motive, and that is also happening with this article which I am reading now.
This is very fascinating, You’re an excessively professional blogger. I’ve joined your feed and sit up for in quest of extra of your wonderful post. Also, I’ve shared your website in my social networks