Create Vertical Accordion Menu Tabbed Using CSS And jQuery

Share:

Create Vertical Accordion Menu Tabbed Using CSS And jQuery. Tutorial about creating a website design menu has not been widely discussed in this post, we will review how to create a tabbed menu. More details on how to create a vertical accordion menu using css and also tabbed jQuery. This tabbed menu is very suitable for use as a tab menu of your mobile website.
Create Vertical Accordion Menu Tabbed Using CSS And jQuery Create Vertical Accordion Menu Tabbed Using CSS And jQuery

Create Vertical Accordion Menu Tabbed Using CSS And jQuery

Right away, here’s how to create a vertical accordion tabbed menu using CSS And jQuery.

Download now Create Vertical Accordion Menu Tabbed Using CSS And jQuery

Create HTML Code
Here’s a snippet of the html code :

	<div id="wrapper-250">
		<ul class="accordion">
			<li id="one" class="files">
				<a href="#one">Menu Name<span>495</span></a>
				<ul class="sub-menu">		
					<li><a href="#"><em>01</em>Submenu Name<span>42</span></a></li>	
					<li><a href="#"><em>02</em> Submenu Name <span>87</span></a></li>
					<li><a href="#"><em>03</em> Submenu Name <span>366</span></a></li>
				</ul>
			</li>
		</ul>		
	</div>

You can make a lot of vertical accordion menu tabbed above. The trick is to copy the html code, ranging from <li id="one" class="files"> up </ li>. Replace the id with the next number eg two, three and replace the class with the name of the menu. Fill in the menu name and submenu name.

Create CSS Code
After we finished creating the html code it is time to create css code. Put this code on the particular css page eg vertical-accordion-menu.css. completely, that is the css script :
vertical-accordion-menu.css

/*  Create Vertical Accordion Menu Tabbed Using CSS And jQuery  */	
	body{
	background:url('http://2.bp.blogspot.com/-Szi3l72etiw/UkPKN8AnRmI/AAAAAAAABA4/rI-T5NVevg8/s1600/Create+Vertical+Accordion+Menu+Tabbed+Using+CSS+And+jQuery+1.jpg') no-repeat;
	background-size:100% 100%;
	width:400px;
	height:700px;
	padding-top:20px;
	margin:0 auto;
	margin-top:100px;
	}
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}
.accordion li {
	list-style: none;
}
/* Layout & Style */
.accordion li > a {
	display: block;
	position: relative;
	min-width: 110px;
	padding: 0 10px 0 40px;
	height: 32px;
	color: #fdfdfd;
	font: bold 12px/32px Arial, sans-serif;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
	background: #6c6e74;
	background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
	background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
	color: #3e5706;
	text-shadow: 1px 1px 1px rgba(255,255,255, .2);
	background: #970eb6;
	background: -moz-linear-gradient(top,  #970eb6 0%, #c822ee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#970eb6), color-stop(100%,#c822ee));
	background: -webkit-linear-gradient(top,  #970eb6 0%,#c822ee 100%);
	background: -o-linear-gradient(top,  #970eb6 0%,#c822ee 100%);
	background: -ms-linear-gradient(top,  #970eb6 0%,#c822ee 100%);
	background: linear-gradient(top, #970eb6  0%,#c822ee 100%);	
}
.accordion li > a span {
	display: block;
	position: absolute;
	top: 7px;
	right: 0;
	padding: 0 10px;
	margin-right: 10px;
	font: normal bold 12px/18px Arial, sans-serif;
	background: #404247;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
	box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
	color: #fdfdfd;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
	background: #700a87;
}
/* Images */
.accordion > li > a:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 24px;
	height: 24px;
	margin: 4px 8px;

	background-repeat: no-repeat;
	background-image: url(http://3.bp.blogspot.com/-Zwm9SF1FNUk/UkPKSkaVx6I/AAAAAAAABBA/1KOwcdf1gv4/s1600/Create+Vertical+Accordion+Menu+Tabbed+Using+CSS+And+jQuery+2.png);
	background-position: 0px 0px;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

/* Sub Menu */
.sub-menu li a {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);

	background: #e5e5e5;
	border-bottom: 1px solid #960eb6;

	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { background: #efefef; }
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
	color:#fff;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: #960eb6;
	border: 1px solid #960eb6;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.sub-menu em {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 14px;
	color: #a6a6a6;
	font: normal 10px/32px Arial, sans-serif;
}
/* Functionality */
.accordion li > .sub-menu {
	display: none;
}
.accordion li:target > .sub-menu {
	display: block;
}

Create jQuery
As this pure CSS3 Accordion Menu will not work on all browsers because the :target selector in not supported in the oldest browsers we decided to create a jQuery version of this menu. We rather suggest you to use jQuery. This is the jQuery script :
jquery.js

		$(document).ready(function() {
			// Store variables
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');
			// Open the first tab on load
			accordion_head.first().addClass('active').next().slideDown('normal');
			// Click function
			accordion_head.on('click', function(event) {
				// Disable header links
				event.preventDefault();
				// Show and hide the tabs on click
				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideToggle('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}
			});
		});

Don’t forget to add jQuery url below into your page.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Put all the jQuery link in above of </head> tag.

When you have completed the three steps above, then the look on your web browser. The result is as follows.
Create Vertical Accordion Menu Tabbed Using CSS And jQuery Create Vertical Accordion Menu Tabbed Using CSS And jQueryTo facilitate you in learning the accordion tabbed menu, please copy the script below and save it on a notepad or adobe dreamweaver and the file name is vertical-accordian-tabbed.html.

<html>
<head>
	<title> Create Vertical Accordion Menu Tabbed Using CSS And jQuery </title>
    <link rel="stylesheet" href="vertical-accordion-menu.css" type="text/css" media="screen"/>	
	<script type="text/javascript" src="jquery.js"></script>		
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
	<div id="wrapper-250">
		<ul class="accordion">
			<li id="one" class="files">
				<a href="#one">My Files<span>495</span></a>
				<ul class="sub-menu">		
					<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>	
					<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>
					<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>
					<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>	
					<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>
				</ul>
			</li>
			<li id="two" class="mail">
				<a href="#two">Mail<span>26</span></a>
				<ul class="sub-menu">	
					<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>	
					<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>
				</ul>
			</li>
			<li id="three" class="cloud">
				<a href="#three">Cloud<span>58</span></a>
				<ul class="sub-menu">					
					<li><a href="#"><em>01</em>Connect<span>12</span></a></li>					
					<li><a href="#"><em>02</em>Profiles<span>8</span></a></li>
					<li><a href="#"><em>03</em>Options<span>27</span></a></li>
					<li><a href="#"><em>04</em>Connect<span>325</span></a></li>				
					<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>
					<li><a href="#"><em>06</em>Options<span>27</span></a></li>					
					<li><a href="#"><em>07</em>Connect<span>12</span></a></li>					
					<li><a href="#"><em>08</em>Profiles<span>3</span></a></li>
					<li><a href="#"><em>09</em>Options<span>27</span></a></li>					
				</ul>
			</li>			
			<li id="four" class="sign">
				<a href="#four">Sign Out</a>
				<ul class="sub-menu">					
					<li><a href="#"><em>01</em>Log Out</a></li>					
					<li><a href="#"><em>02</em>Delete Account</a></li>
					<li><a href="#"><em>03</em>Freeze Account</a></li>
				</ul>
			</li>		
		</ul>	
<p style="color:#555;text-align:right;font-size:12px;">by Tutorial.World.Edu</p>		
	</div>
</body>
</html>

This tutorial is a modified tutorial from how to create accordion menu in designmodo.com, if you want to visit display the previous vertical accordion menu, please visit this link.
If there is a problem please expressed in the comment box below.
Thanks for reading Create Vertical Accordion Menu Tabbed Using CSS And jQuery

[Tutorial.World.Edu]

2 thoughts on “Create Vertical Accordion Menu Tabbed Using CSS And jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *