How we can manage long dropdown with sub-menu items? Solution: See this Scrolling Sub Menu Items For Long Dropdown Menu, Navbar With jQuery & CSS.
Previously I have shared many navbar related programs, but this is a solution for the long dropdown menu. Basically, we all use a dropdown menu but sometimes the sub-menu items are large in quantity, then we get trouble to manage them. When the dropdown becomes very long in height because of many sub-menu items, then you have to scroll down the whole page for seeing the left items. Suppose, we don’t have a sticky navbar and the dropdown based on hover then the user can’t access all the items. Because, if the user scrolls down the page for seeing the left items then the navbar will go upside and they can’t hover on it from bottom or downside.
Today you will learn to create a navbar with jQuery and CSS for managing long dropdowns. Basically, there is a navbar with 4 menu items and inside the menu, there are some sub-menu items that will visible on hover. On the first menu link, there are many sub-items, the second one has lesser than the first one and the other two have the number of sub-items with same order. But there is fix or max size of the dropdown, that does not matter the menu contains how many sub-items. The main feature is you will hover on the last sub-item then it will automatically scroll down.
So, Today I am sharing Scrolling Sub Menu Items For Long Dropdown Menu. There I have used jQuery for creating this program which is a JS library, that’s why I am putting this post in the JavaScript category. All the styles are based on simple CSS, there is no UI library. This navbar program has not responsive design because it is only an example of how we can manage long dropdowns.
If you are thinking now how this long navbar actually is, then see the preview given below.
Preview Of jQuery and CSS Solution For Long Dropdown Menu
See this video preview to getting an idea of how this scrollable submenu looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Drag and Drop List
- jQuery Aspect Ratio Calculator
- Multiselect Dropdown Checkbox
- Scroll Down Button Indicator
Scrolling Sub Menu Items For Long Dropdown Menu Source Code
Before sharing source code, let’s talk about it. First, I have created the layout using HTML </nav> tag and placed a list inside it for creating the menu items. All the menu and sub-menus are based on HTML list <ul> & <li> tags and for the sub-menu items I have placed another list inside the menu list items.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave style to the elements by giving size, position, color, margin, padding, etc. There I have used a google font in the program for good UI, and also you can see in hover effect which is change background color on mouseover.
jQuery handling the main part or feature of the program, which is scrollable sub menu items. The dropdown has a max-height but sub-items will scroll down or up on mouse move. For creating that feature I have used .mousemove function (info) command and also used if{} else{} statements. JS codes are a little complicated I can’t explain here, but you will understand after getting the codes.
For creating this program you have to create 3 files. First one for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Long Drop Down Items | Webdevtrick.com</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <h1>Long Drop Down Items Scroll</h1> <nav> <ul class="dropdown"> <li class="drop"><a href="#">Coding</a> <ul class="subItems"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">React JS</a></li> <li><a href="#">Angular</a></li> <li><a href="#">Vue JS</a></li> <li><a href="#">Node JS</a></li> <li><a href="#">Redux</a></li> <li><a href="#">ASP .net</a></li> <li><a href="#">Python</a></li> <li><a href="#">Ruby</a></li> <li><a href="#">D3 JS</a></li> <li><a href="#">Laravel</a></li> <li><a href="#">Codintiger</a></li> <li><a href="#">Java</a></li> <li><a href="#">Kotlin</a></li> <li><a href="#">C++</a></li> <li><a href="#">Ploymer JS</a></li> <li><a href="#">Yii 2</a></li> <li><a href="#">On Rails</a></li> <li><a href="#">Express JS</a></li> </ul> </li> <li class="drop"><a href="#">Marketing</a> <ul class="subItems"> <li><a href="#">SEO</a></li> <li><a href="#">Search Engine</a></li> <li><a href="#">Social Media</a></li> <li><a href="#">Video</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Adwords</a></li> <li><a href="#">Fb Audience</a></li> <li><a href="#">Guest Articles</a></li> <li><a href="#">Boost</a></li> <li><a href="#">Instagram</a></li> <li><a href="#">Doubleclick</a></li> <li><a href="#">Direct</a></li> <li><a href="#">Bing Ads</a></li> <li><a href="#">Admob</a></li> <li><a href="#">Branding</a></li> </ul> </li> <li class="drop"><a href="#">CMS</a> <ul class="subItems"> <li><a href="#">Wordpress</a></li> <li><a href="#">Drupal</a></li> <li><a href="#">Magento</a></li> <li><a href="#">Shopify</a></li> <li><a href="#">WIX</a></li> </ul> </li> <li class="drop"><a href="#">Webmaster</a> <ul class="subItems"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yandex</a></li> <li><a href="#">Baidu</a></li> </ul> </li> </ul> </nav> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
@import url('https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap'); body{ margin: 0px; padding: 0px; background: #ff7011; font-family: 'Sulphur Point', sans-serif; } h1{ margin: 1em 0px; padding: 0px; color: #fff; text-align: center; font-weight: 400; font-size: 50px; } nav{ width: 750px; margin: 1em auto; } ul{ margin: 0px; padding: 0px; list-style: none; } ul.dropdown{ position: relative; width: 100%; } ul.dropdown li{ font-weight: bold; float: left; width: 180px; position: relative; background: #ecf0f1; } ul.dropdown a:hover{ color: #000; } ul.dropdown li a { display: block; padding: 20px 8px; color: #34495e; position: relative; z-index: 2000; text-align: center; text-decoration: none; font-weight: 300; } ul.dropdown li a:hover, ul.dropdown li a.hover{ background: #3498db; position: relative; color: #fff; } ul.dropdown ul{ display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; } ul.dropdown ul li a{ display: block; color: #34495e !important; background: #eee !important; } ul.dropdown ul li a:hover{ display: block; background: #3498db !important; color: #fff !important; } .drop > a{ position: relative; } .drop > a:after{ content:""; position: absolute; right: 10px; top: 40%; border-left: 5px solid transparent; border-top: 5px solid #333; border-right: 5px solid transparent; z-index: 999; } .drop > a:hover:after{ content:""; border-left: 5px solid transparent; border-top: 5px solid #fff; border-right: 5px solid transparent; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
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 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ var maxHeight = 400; $(function(){ $(".dropdown > li").hover(function() { var $container = $(this), $list = $container.find("ul"), $anchor = $container.find("a"), height = $list.height() * 1.1, multiplier = height / maxHeight; $container.data("origHeight", $container.height()); $anchor.addClass("hover"); $list .show() .css({ paddingTop: $container.data("origHeight") }); 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); $el .height($(this).data("origHeight")) .find("ul") .css({ top: 0 }) .hide() .end() .find("a") .removeClass("hover"); }); }); |
That’s It. Now you have successfully created Scrolling Sub Menu Items For Long Dropdown Menu, Program With jQuery & CSS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
