Very simple jQuery dropdown navigation

Developer
Kevin
Size
1,973 Kb
Views
28,336
  1. Very simple jQuery dropdown navigation Previews
  2. Very simple jQuery dropdown navigation HTML Codes
  3. Very simple jQuery dropdown navigation CSS Codes
  4. Very simple jQuery dropdown navigation JS Codes

How do I make an very simple jquery dropdown navigation?

What is a very simple jquery dropdown navigation? How do you make a very simple jquery dropdown navigation? This script and codes were developed by Kevin on 12 August 2022, Friday.

Very simple jQuery dropdown navigation Previews
IQ Test

Very simple jQuery dropdown navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Very simple jQuery dropdown navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown-trigger"><a href="#">Dropdown menu</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 01</a></li> <li><a href="#">Dropdown 02</a></li> <li><a href="#">Dropdown 03</a></li> </ul> </li> <li><a href="#">Another menu item</a></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Very simple jQuery dropdown navigation - Script Codes CSS Codes

body { background: #aaa; color: white; font-size: 20px; }
.nav { background: #555;
}
.nav ul { padding: 0; margin: 0; list-style: none;
}
.nav li { display: inline-block; padding: 20px 40px; position: relative;
}
.nav li:hover { background: #888;
}
.nav a { color: white; text-decoration: none;
}
.dropdown-menu { display: none; position: absolute; top: 60px; left: 0px;
}
.nav li ul li { display: block; padding: 20px 40px; background: #555;
}

Very simple jQuery dropdown navigation - Script Codes JS Codes

$(document).ready(function(){	$(".dropdown-trigger").click( // switch 'click' for 'hover' if you want the menu to appear on hover.	function(){ $('.dropdown-menu').toggle();	});
});
Very simple jQuery dropdown navigation - Script Codes
Very simple jQuery dropdown navigation - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded August 12, 2022
Rating 3
Size 1,973 Kb
Views 28,336
Do you need developer help for Very simple jQuery dropdown navigation?

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!

Kevin (kevinpowell) Script Codes
Name
Margin vs Padding
Awesome Portfolio demo
Bootstrap grid basics
Setting label widths
CSS outlines
CSS Grid Area demo
Explicit and Implicit grid
A Pen by Kevin
CSS Grid Area demo - the start
Parallax only on large screens
Create amazing captions 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!