Vertical accordion menu using jQuery and CSS3

In this example below you will see how to do a Vertical accordion menu using jQuery and CSS3 with some HTML / CSS and Javascript

A sleek vertical accordion menu for your next website/app.The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.

Thumbnail
This awesome code was written by phantomtnt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright phantomtnt ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vertical accordion menu using jQuery and CSS3</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="accordian_menu" >
	<ul>
		<li  class="active" id="1">
			<h3><span class="icon-user"></span>Dashboard</h3>
			<ul >
				<li><a href="#">Reports</a></li>
				<li><a href="#">Search</a></li>
				<li><a href="#">Graphs</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
		<!-- we will keep this LI open by default -->
		<li class="active" id="2">
			<h3><span class="icon-tasks"></span>Tasks</h3>
			<ul>
				<li><a href="#">Today's tasks</a></li>
				<li><a href="#">Urgent</a></li>
				<li><a href="#">Overdues</a></li>
				<li><a href="#">Recurring</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
		<li class="active" id="3">
			<h3><span class="icon-calendar"></span>Calendar</h3>
			<ul>
				<li><a href="#">Current Month</a></li>
				<li><a href="#">Current Week</a></li>
				<li><a href="#">Previous Month</a></li>
				<li><a href="#">Previous Week</a></li>
				<li><a href="#">Next Month</a></li>
				<li><a href="#">Next Week</a></li>
				<li><a href="#">Team Calendar</a></li>
				<li><a href="#">Private Calendar</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
		<li class="active" id="4">
			<h3><span class="icon-heart"></span>Favourites</h3>
			<ul>
				<li><a href="#">Global favs</a></li>
				<li><a href="#">My favs</a></li>
				<li><a href="#">Team favs</a></li>
				<li><a href="#">Settings</a></li>
			</ul>
		</li>
	</ul>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/phantomtnt/vertical-accordion-menu-using-jquery-and-css3-aAntF */
/*custom font for text*/
@import url(https://fonts.googleapis.com/css?family=Nunito);
/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: https://fortawesome.github.io/Font-Awesome/ */
@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);

/*Basic reset*/
* {margin: 0; padding: 0;}

body {
	background: #4EB889;
	font-family: Nunito, arial, verdana;
}
#accordian_menu {
	background: rgb(0,15,55);
	width: 250px;
	margin: 100px auto 0 auto;
	color: white;
	/*Some cool shadow and glow effect*/
	box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian_menu h3 {
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	/*fallback for browsers not supporting gradients*/
	background: rgb(0,55,145); 
	background: linear-gradient(rgb(0,55,145),rgb(0,35,85));
}
/*heading hover effect*/
#accordian_menu h3:hover {
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian_menu h3 span {
	font-size: 16px;
	margin-right: 10px;
}
/*list items*/
#accordian_menu li {
	list-style-type: none;
}
/*links*/
#accordian_menu ul ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 15px;
	/*transition for smooth hover animation*/
	transition: all 0.15s;
}
/*hover effect on links*/
#accordian_menu ul ul li a:hover {
	background: rgb(244,244,244);
	border-left: 5px solid rgba(204,135,0,1);
  color:rgb(204,135,0)
}
/*Lets hide the non active LIs by default*/
#accordian_menu ul ul {
	display: none;
}
#accordian_menu li.active ul {
	display: block;
}


/*Downloaded from https://www.codeseek.co/phantomtnt/vertical-accordion-menu-using-jquery-and-css3-aAntF */
/*jQuery time*/
$(document).ready(function(){

 	$("#accordian_menu #1 h3").click(function(){
		//slide up all the link lists
    
		$("#accordian_menu #1 ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
  	$("#accordian_menu #2 h3").click(function(){
		//slide up all the link lists
    
		$("#accordian_menu #2 ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
    	$("#accordian_menu #3 h3").click(function(){
		//slide up all the link lists
    
		$("#accordian_menu #3 ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
      	$("#accordian_menu #4 h3").click(function(){
		//slide up all the link lists
    
		$("#accordian_menu #4 ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
  		
})

Comments