Simple jQuery accordion menu
How do I make an simple jquery accordion menu?
Simple jQuery accordion menu.. What is a simple jquery accordion menu? How do you make a simple jquery accordion menu? This script and codes were developed by Anoop on 06 September 2022, Tuesday.
Simple jQuery accordion menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple jQuery accordion menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="sidenav"> <li><a href="#">Lorum Ipsum 1</a> <ul> <li><a href="#">Sub Menu Level 1</a></li> <li><a href="#">Sub Menu Level 1</a> <ul> <li><a href="#">Sub Menu Level 2</a></li> <li><a href="#">Sub Menu Level 2</a> <ul> <li><a href="#">Sub Menu Level 3</a></li> <li><a href="#">Sub Menu Level 3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Lorum Ipsum 2</a></li> <li><a href="#">Lorum Ipsum 3</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple jQuery accordion menu - Script Codes CSS Codes
body{font-family: Arial;font-size: 13px;}
a{text-decoration: none;}
ul.sidenav{width: 200px;float: left;margin: 40px;}
ul.sidenav li{width: 200px;float: left;margin-bottom: 1px;position: relative;}
ul.sidenav > li a{display: block; background: #f8ba17; color: #fff; padding: 10px;}
ul.sidenav > li a:hover{background: #d8a00e;}
ul.sidenav > li ul{margin-top: 1px;}
ul.sidenav > li ul a{background: #f7654d;padding-left: 20px;}
ul.sidenav i{width: 33px;height: 33px;position: absolute;right: 0; top: 0; background: #000;color: #fff;text-align: center;line-height:33px; cursor: pointer;}
Simple jQuery accordion menu - Script Codes JS Codes
$('ul.sidenav li:has(ul)').append( "<i>+</i>" );
$('ul.sidenav ul').hide();
$('ul.sidenav i').click(function()
{ $(this).parent('li').children('ul').slideToggle(); $(this).text(function(i, text){ return text === "+" ? "-" : "+"; })
})
Developer | Anoop |
Username | anoopjohn |
Uploaded | September 06, 2022 |
Rating | 3 |
Size | 2,089 Kb |
Views | 30,360 |
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!
Name | Size |
Hide select arrow in Firefox | 1,747 Kb |
Parallax Effect | 2,393 Kb |
Price Slider | 2,985 Kb |
Vue App | 2,070 Kb |
Pie Chart | 4,762 Kb |
Example | 1,707 Kb |
Vue Web App | 3,284 Kb |
A Pen by Anoop | 330,760 Kb |
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!
Name | Username | Size |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
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!