Solution for Long Drop Down Items

Developer
Larry Geams Parangan
Size
3,127 Kb
Views
36,432
  1. Solution for Long Drop Down Items Previews
  2. Solution for Long Drop Down Items HTML Codes
  3. Solution for Long Drop Down Items CSS Codes
  4. Solution for Long Drop Down Items JS Codes

How do I make an solution for long drop down items?

Problem with long drop down menus? Well, try this simple solution with the use of javascript and jQuery.. What is a solution for long drop down items? How do you make a solution for long drop down items? This script and codes were developed by Larry Geams Parangan on 06 September 2022, Tuesday.

Solution for Long Drop Down Items Previews
IQ Test

Solution for Long Drop Down Items - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Solution for Long Drop Down Items</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Made with Love by Larry Geams-->
<h1>Solution for Long Drop Down Items</h1>
<nav>
<ul class="dropdown">	<li class="drop"><a href="#">Really Tall Menu</a>	<ul class="sub_menu">	<li><a href="#">Lorem</a></li>	<li><a href="#">Ipsum</a></li>	<li><a href="#">Dolor</a></li>	<li><a href="#">Lipsum</a></li>	<li><a href="#">Consectetur </a></li>	<li><a href="#">Duis</a></li>	<li><a href="#">Sed</a></li>	<li><a href="#">Natus</a></li>	<li><a href="#">Excepteur</a></li>	<li><a href="#">Voluptas</a></li>	<li><a href="#">Voluptate</a></li>	<li><a href="#">Malorum</a></li>	<li><a href="#">Bonorum</a></li>	<li><a href="#">Nemo</a></li>	<li><a href="#">Quisquam</a></li>	<li><a href="#">Adipisci </a></li>	<li><a href="#">Excepteur</a></li>	<li><a href="#">Consectetur </a></li>	<li><a href="#">Duis</a></li>	<li><a href="#">Voluptate</a></li>	<li><a href="#">Ipsum</a></li>	<li><a href="#">Dolor</a></li>	<li><a href="#">Lipsum</a></li>	</ul>	</li>	<li class="drop"><a href="#">Kinda Tall Menu</a>	<ul class="sub_menu">	<li><a href="#">Lorem</a></li>	<li><a href="#">Ipsum</a></li>	<li><a href="#">Dolor</a></li>	<li><a href="#">Lipsum</a></li>	<li><a href="#">Consectetur </a></li>	<li><a href="#">Duis</a></li>	<li><a href="#">Sed</a></li>	<li><a href="#">Natus</a></li>	<li><a href="#">Excepteur</a></li>	<li><a href="#">Voluptas</a></li>	<li><a href="#">Voluptate</a></li>	<li><a href="#">Malorum</a></li>	<li><a href="#">Bonorum</a></li>	<li><a href="#">Nemo</a></li>	<li><a href="#">Quisquam</a></li>	</ul>	</li>	<li class="drop"><a href="#">Average Menu</a>	<ul class="sub_menu">	<li><a href="#">Lorem</a></li>	<li><a href="#">Ipsum</a></li>	<li><a href="#">Dolor</a></li>	<li><a href="#">Lipsum</a></li>	<li><a href="#">Consectetur </a></li>	</ul>	</li>	<li><a href="#">No Menu</a>	</li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Solution for Long Drop Down Items - Script Codes CSS Codes

body{ margin: 0px; padding: 0px; background: #e74c3c; font-family: 'Lato', sans-serif;
}
h1{ margin: 2em 0px; padding: 0px; color: #fff; text-align: center; font-weight: 100; 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;
}

Solution for Long Drop Down Items - Script Codes JS Codes

/*
*
* Credits to https://css-tricks.com/long-dropdowns-solution/
*
*/
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"); });
});
Solution for Long Drop Down Items - Script Codes
Solution for Long Drop Down Items - Script Codes
Home Page Home
Developer Larry Geams Parangan
Username larrygeams
Uploaded September 06, 2022
Rating 4.5
Size 3,127 Kb
Views 36,432
Do you need developer help for Solution for Long Drop Down Items?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Larry Geams Parangan (larrygeams) Script Codes
Name
The Android Story
Simple Dot Navigation Style
Works by Category
Pure CSS Checklist Icon
See Through
CSS3 Loading Disk
Simple E-Commerce
Click and Hold Button Animation
One Page Navigation
Window.onload
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!