How to Make Hanging Tab CSS and Jquery

Hello friends ! In this tutorial we are making hanging tab like wordpress screen option tab which shown in wordpress dashbord in the right hand side two tab are show screen option and help tab.
So today we will try to make wordpress style hanging tab.

Final Result:

First off all we mae the structur of html.

The HTML

	<div class="container">
	<nav>
	<ul>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Account Details</a></li>
	<li><a href="#">Privacy Setting</a></li>
	<li><a href="#">Contact Details</a></li>
	<li><a href="#">Advert Setting</a></li>
	<li><a href="#">Users Detail</a></li>
	</ul>
	</nav>
	<div class="hanging-tab">
	<a href="#" id="slide">Hanging Tab &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>&nabla;</span></a>
	</div>
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

Now we go style the hanging tab

	.container{
	width:100%;
	height:auto;
	border:#09F thin solid;
	}
	nav{
	width:100%;
	background:#09C;
	height:auto;
	box-shadow:#09F 0px 2px 10px;
	}
	nav ul{
	list-style:none;
	margin:0 auto;
	width:80%;
	padding:40px 0px;x
	}
	nav ul li{
	display:inline-block;
	padding:15px;
	color:#FFF;
	background:#06F;
	border-radius:5px;
	}
	nav ul li a{
	color:#FFF;
	text-decoration:none;
	padding:0px 31px;
	}
	.hanging-tab{
	color:#FFF;
	background:#09C;
	float:right;
	padding:10px 40px;
	margin-right:50px;
	box-shadow:#09F 0px 3px 4px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	}
	a{text-decoration:none; color:#FFF; }
	span{border:#FFF thin solid; padding:2px 5px; }

view raw gistfile1.css hosted with ❤ by GitHub

After styling the hanging tab this is the look like this

 So we add Display:none property in Nav ul CSS and add some javascript code for hanging the tab when you click on the hanging tab button then ul element will move to slide to bottom.

nav ul{
list-style:none;
margin:0 auto;
width:80%;
padding:40px 0px;
display:none;
}

The Jquery

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	$(function() {
	var slide = $('#slide');
	hangingtab = $('nav ul');
	tabHeight = hangingtab.height();
	$(slide).on('click', function(e) {
	e.preventDefault();
	hangingtab.slideToggle();
	});
	});
	});
	</script>

view raw gistfile1.js hosted with ❤ by GitHub

Wew! this will take long time to make the tutorial now finally finish the tutorial. How was the tutorial i hope you will learn something if you like the tutorial then share with your friends. Thanks :)