JQuery Dropdown Menu

Developer
Matt Shull
Size
2,162 Kb
Views
24,288
  1. JQuery Dropdown Menu Previews
  2. JQuery Dropdown Menu HTML Codes
  3. JQuery Dropdown Menu CSS Codes
  4. JQuery Dropdown Menu JS Codes

How do I make an jquery dropdown menu?

A dropdown menu made from jQuery.. What is a jquery dropdown menu? How do you make a jquery dropdown menu? This script and codes were developed by Matt Shull on 28 September 2022, Wednesday.

JQuery Dropdown Menu Previews
IQ Test

JQuery Dropdown Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Dropdown Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <!--Use an ul to organize menu--> <ul id="menu"> <!--Use li to create menu links--> <li class="link"> <a href="#" class="linkName"> Home </a> </li> <li class="link"> <a href="#" class="linkName"> About Me </a> <!--Create another ul, INSIDE the li with a class="submenu" if you want a dropdown.--> <ul class="submenu"> <li class="sublink"> <a href="#">Portfolio</a> </li> <li class="sublink"> <a href="#">Interests</a> </li> <li class="sublink"> <a href="#">Photos</a> </li> </ul> </li> <li class="link"> <a href="#" class="linkName"> Blog </a> <ul class="submenu"> <li class="sublink"> <a href="#">Blog Post 1</a> </li> <li class="sublink"> <a href="#">Blog Post 2</a> </li> <li class="sublink"> <a href="#">Blog Post 3</a> </li> </ul> </li> <li class="link"> <a href="#" class="linkName"> Contact </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>

JQuery Dropdown Menu - Script Codes CSS Codes

#menu { list-style:none; padding:0; text-align:center;
}
.link { display:inline-block; width:24%; vertical-align:top; position:relative;
}
.linkName { padding:10px 5px; text-decoration:none; color:black; display:block; cursor:pointer;
}
.linkName:hover, .highlight { background-color:lightgray;
}
.submenu { width:99.5%; padding:0; list-style:none; border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; text-align:left; display:none; position:absolute; background-color:white;
}
.sublink { margin:7px 10px; cursor:pointer;
}

JQuery Dropdown Menu - Script Codes JS Codes

$(".link").on("mouseenter", function() { $(this).children(".submenu").show(); $(this).addClass("highlight");
});
$(".link").on("mouseleave", function() { $(this).children(".submenu").hide(); $(this).removeClass("highlight");
});
JQuery Dropdown Menu - Script Codes
JQuery Dropdown Menu - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 2,162 Kb
Views 24,288
Do you need developer help for JQuery Dropdown Menu?

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!

Matt Shull (derekshull) Script Codes
Name
Inline vs Inline Block vs Block
SPP Mainpage
CSS Only Parallax
Template Style Prototype
CSS Only Dropdown Menus
Peter Miller Wireframe
Angular 2-way Data Binding Example
San Jose Services Wireframe
CSS Only Modal
List Animation
Create amazing sales emails 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!