Accordian_222 new
How do I make an accordian_222 new?
What is a accordian_222 new? How do you make a accordian_222 new? This script and codes were developed by Milano_O on 11 December 2022, Sunday.
Accordian_222 new - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>accordian_222 new</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"> <div class="wrapper"> <div class="accordian_nav"> <li> <a href="#" class="accordian_button">Home</a> <ul class="accordian_panel"> <li><a href="https://www.youtube.com/watch?v=3YZ60mQA4Q8">Home1</a></li> <li><a href="#">Home2</a></li> <li><a class="accordian_button" href="#">Home3</a> <ul class="accordian_panel"> <li><a href="#">Home11</a></li> <li><a href="#">Home22</a></li> <li> <a class="accordian_button" href="#">Home33</a> <ul class="accordian_panel"> <li><a href="#">Home111</a></li> <li><a href="#">Home222</a></li> <li><a href="#">Home333</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#" class="accordian_button">About</a> <ul class="accordian_panel"> <li><a href="#">Home1</a></li> <li><a href="#">Home2</a></li> <li><a href="#">Home3</a></li> </ul> </li> <li> <a href="#" class="accordian_button">Contact</a> <ul class="accordian_panel"> <li><a href="#">Home1</a></li> <li><a href="#">Home2</a></li> <li><a href="#">Home3</a></li> </ul> </li> </div> </div>
</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>
Accordian_222 new - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700);
html, body { background: #C5CBD1; height: 100%; margin: 0; padding: 0; width: 100%;
}
.container { width: 100%; float: left;
}
.container .wrapper { max-width: 600px; margin: 0 auto;
}
.container .wrapper .accordian_nav { margin: 90px 0; overflow: hidden; padding: 0;
}
.container .wrapper .accordian_nav li { list-style-type: none;
}
.container .wrapper .accordian_nav li .accordian_button { background: #FFFFFF; color: #282F35; font-family: 'Josefin Sans', Arial, sans-serif; border: none; border-bottom: solid 1px #F2F2F2; cursor: pointer; display: block; padding: 10px 0; position: relative; text-align: center; width: 100%; text-decoration: none;
}
.container .wrapper .accordian_nav li .accordian_button:before { background: #44596B; content: ''; height: 2px; margin-right: 37px; position: absolute; right: 0; top: 50%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 14px;
}
.container .wrapper .accordian_nav li .accordian_button:after { background: #44596B; content: ''; height: 2px; margin-right: 37px; position: absolute; right: 0; top: 50%; width: 14px;
}
.container .wrapper .accordian_nav li .active:before { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.container .wrapper .accordian_nav li .accordian_panel { background: #F2F2F2; display: none; overflow: hidden;
}
.container .wrapper .accordian_nav li .accordian_panel li a { color: indianred; background: #FFFFFF; border: none; border-bottom: solid 1px #F2F2F2; cursor: pointer; display: block; padding: 10px 0; position: relative; text-align: center; width: 100%; text-decoration: none;
}
.container .wrapper .accordian_nav li .accordian_panel li a:hover { background: #ccc;
}
Accordian_222 new - Script Codes JS Codes
$(function() { $('.accordian_button').on('click', function(e) { e.preventDefault(); if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).next() .stop() .slideUp(300); } else { $(this).addClass('active'); $(this).next() .stop() .slideDown(300); } });
});
Developer | Milano_O |
Username | milanodituti |
Uploaded | December 11, 2022 |
Rating | 3 |
Size | 3,320 Kb |
Views | 8,096 |
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 |
Input, forms, datalist... | 2,530 Kb |
Svg basic | 2,844 Kb |
Table | 2,388 Kb |
Masonry plugin | 2,714 Kb |
Materialize | 2,578 Kb |
A Pen by milano_O | 2,969 Kb |
HTML-and-CSS-slide-out-navigation | 2,963 Kb |
Acorrdian 2016 | 3,720 Kb |
Verso_toggle-menu | 4,424 Kb |
Organizing Data with Tables | 2,049 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 |
Drag n Drop | Martin42 | 2,594 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
The Rope | Chribbe | 2,886 Kb |
Animated skewed panes | NyX | 4,462 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 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!