JQuery Dropdown Menu
How do I make an jquery dropdown menu?
JQuery Dropdown Menu with arrows. Work in progress.Forked from Michael Large's Pen jQuery Dropdown Menu.. What is a jquery dropdown menu? How do you make a jquery dropdown menu? This script and codes were developed by Nugroho Indra Utomo on 17 October 2022, Monday.
JQuery Dropdown Menu Previews
JQuery Dropdown Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Dropdown Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
* { box-sizing: border-box;
}
body { padding: 2em; background: #ccc; font-family: sans-serif;
}
a { text-decoration: none; color: #000;
}
.menu-container { width: 200px; position: relative; margin: auto; background: white; padding-bottom: 20px;
}
.menu-container .down:before { content: "▼ ";
}
.menu-container ul { width: 100%; margin: 0;
}
.menu-container ul li { list-style: none; background: white;
}
.menu-container ul li a { display: block; padding: 5%;
}
.menu-container ul li a:hover { background-color: red; color: white;
}
.menu-container ul li a:hover:before { color: white;
}
.menu-container ul li a:before { content: "▶ "; color: red;
}
.menu-container ul li ul { margin-left: 13%; font-size: 13px;
}
.menu-container ul li ul li { border-left: #ccc solid 3px; width: 85%;
}
.menu-container ul li ul li a { padding: 5px; color: #ccc;
}
.menu-container ul li ul li a:hover, .menu-container ul li ul li a:active { color: black; background-color: transparent;
}
.menu-container ul li ul li a:hover:before, .menu-container ul li ul li a:active:before { content: "";
}
.menu-container ul li ul li a:before { content: "";
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="menu-container"> <ul class="menu" id="sidebar-menu"> <li class="menu-item"><a href="#">Menu Item 1</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub Menu Item 1</a></li> <li class="menu-item"><a href="#">Sub Menu Item 2</a></li> <li class="menu-item"><a href="#">Sub Menu Item 3</a></li> <li class="menu-item"><a href="#">Sub Menu Item 4</a></li> </ul>
</li> <li class="menu-item"><a href="#">Menu Item 2</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub Menu Item 1</a></li> <li class="menu-item"><a href="#">Sub Menu Item 2</a></li> <li class="menu-item"><a href="#">Sub Menu Item 3</a></li> <li class="menu-item"><a href="#">Sub Menu Item 4</a></li> </ul> </li> <li class="menu-item"><a href="#">Menu Item 3</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub Menu Item 1</a></li> <li class="menu-item"><a href="#">Sub Menu Item 2</a></li> <li class="menu-item"><a href="#">Sub Menu Item 3</a></li> <li class="menu-item"><a href="#">Sub Menu Item 4</a></li> </ul> </li> <li class="menu-item"><a href="#">Menu Item 4</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Sub Menu Item 1</a></li> <li class="menu-item"><a href="#">Sub Menu Item 2</a></li> <li class="menu-item"><a href="#">Sub Menu Item 3</a></li> <li class="menu-item"><a href="#">Sub Menu Item 4</a></li> </ul> </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>
JQuery Dropdown Menu - Script Codes CSS Codes
@charset "UTF-8";
* { box-sizing: border-box;
}
body { padding: 2em; background: #ccc; font-family: sans-serif;
}
a { text-decoration: none; color: #000;
}
.menu-container { width: 200px; position: relative; margin: auto; background: white; padding-bottom: 20px;
}
.menu-container .down:before { content: "▼ ";
}
.menu-container ul { width: 100%; margin: 0;
}
.menu-container ul li { list-style: none; background: white;
}
.menu-container ul li a { display: block; padding: 5%;
}
.menu-container ul li a:hover { background-color: red; color: white;
}
.menu-container ul li a:hover:before { color: white;
}
.menu-container ul li a:before { content: "▶ "; color: red;
}
.menu-container ul li ul { margin-left: 13%; font-size: 13px;
}
.menu-container ul li ul li { border-left: #ccc solid 3px; width: 85%;
}
.menu-container ul li ul li a { padding: 5px; color: #ccc;
}
.menu-container ul li ul li a:hover, .menu-container ul li ul li a:active { color: black; background-color: transparent;
}
.menu-container ul li ul li a:hover:before, .menu-container ul li ul li a:active:before { content: "";
}
.menu-container ul li ul li a:before { content: "";
}JQuery Dropdown Menu - Script Codes JS Codes
(function($) { //This tells the browser that this is a jQuery set of javascript. There are many ways to write it out. var allPanels = $('.menu-container > .menu > .menu-item > .sub-menu').hide(); //Set a variable with the direct child selector of '.menu-container > .menu > .menu-item > .sub-menu' then hide it. var firstLink = $('.menu-container > .menu > .menu-item > a'); //Set a variable with the direct child selector of '.menu-container > .menu > .menu-item > a'. //This is an on click function. When the user clicks the anchor (labeled as firstLink) it will run this function. firstLink.click(function() { $this = $(this); //storing the selector as a variable. The $(this) selector refers to the parent of that line (in this case firstLink). $target = $this.next(); if(!$target.hasClass('active')){ allPanels.removeClass('active').slideUp(); firstLink.removeClass('down'); $target.addClass('active').slideDown(); $target.parent().find('a:first').addClass('down'); } return false; });//end function.
})(jQuery); //end jQuery script.
| Developer | Nugroho Indra Utomo |
| Username | indra_z85 |
| Uploaded | October 17, 2022 |
| Rating | 3 |
| Size | 3,726 Kb |
| Views | 28,336 |
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!
Nugroho Indra Utomo (indra_z85) Script Codes
| Name | Size |
| Javascript2 | 1,997 Kb |
| A Pen by nugroho indra utomo | 7,925 Kb |
| Javascript only | 2,016 Kb |
| Fancy box effect | 19,982 Kb |
| Js form | 1,753 Kb |
| Template | 2,323 Kb |
| Responsive2 | 7,059 Kb |
| Track2 | 10,828 Kb |
| Task | 5,383 Kb |
| Slider hover | 2,000 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| SCSS Unit Conversion | Jakob-e | 8,210 Kb |
| A Pen by Tosh | Panev | 2,586 Kb |
| Ball physics | Blackkbot | 3,874 Kb |
| Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
| Text Looping Transition | Agelber | 5,619 Kb |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| Large canvas mousemove experiment | Jibbon | 2,885 Kb |
| ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
| A Pen by Sooba | Sooba | 2,516 Kb |
| Loading animation - freedom purchase | Rocbear | 2,567 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!