Simple Menu
How do I make an simple menu?
What is a simple menu? How do you make a simple menu? This script and codes were developed by Jarad Light on 09 October 2022, Sunday.
Simple Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple 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> <div class="container">
<ul class="categories"> <li> <header> <span>Category 1</span> <div class="tab" href="#">+</div> </header> <ul class="items"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li> <header> <span>Category 2</span> <div class="tab" href="#">+</div> </header> <ul class="items"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li> <header> <span>Category 3</span> <div class="tab" href="#">+</div> </header> <ul class="items"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</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>
Simple Menu - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body { background: #000;
}
.items { display: none;
}
.container { width: 16rem; margin: 2rem auto; font-family: "Open Sans";
}
.categories { background: #333;
}
.categories header { overflow: hidden; color: white; font-weight: 600; box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.2) inset, 0px -2px 0px rgba(0, 0, 0, 0.35) inset; -webkit-transition: background-color 0.2s ease;
}
.categories header span { padding: 1rem; display: block; float: left;
}
.categories header .tab { font-family: "Open Sans"; padding: 1rem; float: right; display: block; background: rgba(255, 255, 255, 0.1);
}
.categories header:hover { background-color: #222; cursor: pointer;
}
a { color: #fff; text-decoration: none; font-weight: 600;
}
.items { background: #777;
}
.items li a { display: block; padding: 1rem;
}
.items li a:hover { background-color: #888;
}
Simple Menu - Script Codes JS Codes
$().ready(function(){ $(".items").slideUp(); $('.items li').click(function(){ //alert("Hello, World!"); }); $("header").click(function(){ $(this).siblings('.items').slideToggle(); });
});
Developer | Jarad Light |
Username | jaradlight |
Uploaded | October 09, 2022 |
Rating | 3 |
Size | 2,790 Kb |
Views | 22,264 |
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 |
Sass Placeholder Stuff | 1,751 Kb |
Animated Checkboxes | 2,911 Kb |
Input File behaviours | 2,550 Kb |
Map Location Hover demo | 3,439 Kb |
Loading Bar | 2,333 Kb |
A Pen by Jarad Light | 2,453 Kb |
RPG Tool | 3,422 Kb |
Dropdown styles | 2,097 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 |
Minimal Menu | Achudars | 3,430 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Super Discount | Orrinward | 3,225 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Flex layout example | Mofny | 1,663 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
About Us | Francescaedits | 1,902 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!