Create A Pretty Accordion Menu with jQuery and CSS3
File Size: | 2.03 KB |
---|---|
Views Total: | 5706 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A nice-looking and animated animated accordion menu built on top of Font Awesome, CSS3 and a little jQuery script.
How to use it:
1. Include the Font Awesome 4 for the title bar icons.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
2. Create an accordion menu using Html unordered lists. Add the CSS class 'active' to a list item you wish to make it open by default.
<div id="accordian"> <ul> <li> <h3><span class="fa fa-dashboard"></span>Dashboard</h3> <ul> <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> </ul> </li> <li class="active"> <h3><span class="fa fa-tasks"></span>Tasks</h3> <ul> <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> </ul> </li> <li> <h3><span class="fa fa-calendar"></span>Calendar</h3> <ul> <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> </ul> </li> <li> <h3><span class="fa fa-heart"></span>Favorites</h3> <ul> <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> </ul> </li> </ul> </div>
3. The required CSS/CSS3 to style the accordion menu.
#accordian { background-color: #004050; box-shadow: 0 5px 15px 1px rgba(0,0,0,.6), 0 0 200px 1px rgba(255,255,255,.5); color: white; margin: 100px auto 0 auto; width: 250px; } /*heading styles*/ #accordian h3 { /*fallback for browsers not supporting gradients*/ background: #003040; background: linear-gradient(#003040, #002535); cursor: pointer; font-size: 12px; line-height: 34px; padding: 0 10px; } /*heading hover effect*/ #accordian h3:hover { text-shadow: 0 0 1px rgba(255,255,255,.7); } /*iconfont styles*/ #accordian h3 span { font-size: 16px; margin-right: 10px; } /*list items*/ #accordian li { list-style-type: none; } /*links*/ #accordian ul ul li a { color: white; display: block; font-size: 11px; line-height: 27px; padding: 0 15px; text-decoration: none; transition: all 0.15s; } #accordian ul ul li a:hover { background-color: #003545; border-left: 5px solid lightgreen; } /*Hiding the non-active list items by default*/ #accordian ul ul { display: none; } #accordian li.active ul { display: block; }
4. Include the latest version of jQuery library at the end of your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5. The Javascript to enable the accordion menu.
$(document).ready(function() { $("#accordian h3").click(function() { //Slide up all the link lists $("#accordian ul ul").slideUp(); //Slide down the link list below the h3 clicked - only if it's closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) })
This awesome jQuery plugin is developed by Stephanie_Cunnane. For more Advanced Usages, please check the demo page or visit the official website.