Sliding Menu Buttons Using CSS3 & jQuery

In this tutorial you will learn how to create buttons with sliding menus using CSS & jQuery.

View Demo

Browser Support	»
Language	»	CSS3, HTML4 & jQuery
Difficulty	»	Intermediate
Estimated Completion Time	»	15 minutes.

Steps to Create the Tabs Effect

→ Download and include jQuery.
→ Create the Buttons using CSS.
→ Create the Slider and links inside it.
→ Use Stylesheet to position the slider.
→ Apply the Sliding Effect using jQuery.

→ Download & Include jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight "write less, do more" JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.

We will have to include jQuery inside the <head> tags.
Here's the code:

<head>

   <script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
 
</head>

There's an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to "http://code.jquery.com/jquery-latest.js";

<head>

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
 
</head>

→ Create the Buttons Menu option

These buttons are created using CSS, they are simple <div> tags.
When the button is clicked it gives an impression like it is actually clicked. This Button effect created using CSS.

In this tutorial we have used four buttons.
So we will have to create four <div> tags and assign class="button" to each of them.

These button have different colors applied on them, so we will create four new classes with "color names" and assign them respectively to the <div> tags.

Here's the Html code

To create these buttons just we will create a <div> tag and assign class="button" to it. To assign colors to the buttons we will add another class "color_name" on the <div> tag.
We will define these classes in the next step.
Note: The two class names are seperated by a space.
Note: The class button should come first and then the class color_name.


   <div class="container"> 
        <div class="button green"> Menu Option </div>
        <div class="button ornage"> Menu Option </div>
        <div class="button violet"> Menu Option </div>
        <div class="button pink"> Menu Option </div>
    </div> <!-- #container -->

Here's the CSS code

We will now define the class="button color_name" Stylesheet code.
First we will create the class="button", and then create the class="color_name"
Then we will concat the two classes using space, and use them as single class selector.

We will define seperate Stylesheet code for the active button(When button is clicked), and when it is released.

 <style type="text/css">

.button {
	padding: 11px 21px 13px;
	display: inline;
	border: 2px solid #FFF;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	text-shadow: 1px 1px #666;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

	box-shadow:inset 0px -4px 21px 0px #f0f0f0;
	-moz-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
	-webkit-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
	box-shadow:0px 2px 21px 0px #3f3f3f;
	-moz-box-shadow:0px 2px 21px 0px #3f3f3f;
	-webkit-box-shadow: 0px 2px 21px 0px #3f3f3f;
	}
.button:active  {
	position: relative;
	top: 6px;
	text-shadow: 2px 2px #666;
	padding: 10px 21px 10px;

	box-shadow:inset 0px 4px 21px 5px #e5e5e5;
	-moz-box-shadow:inset 0px 4px 21px 5px #e5e5e5;
	-webkit-box-shadow:inset 0px 4px 21px 5px #e5e5e5;

	box-shadow: 0px 0px 21px 0px #3f3f3f;
	-moz-box-shadow: 0px 0px 21px 0px #3f3f3f;
	-webkit-box-shadow: 0px 0px 21px 0px #3f3f3f;
}

	.blue	{ background-color: #56c6d9; }
	.green	{ background-color: #99dc30; }
	.orange	{ background-color: #ffd22e; }
	.violet	{ background-color: #c5b8f6; }
	.pink	{ background-color: #fe2192; }
	
 
</style>

→ Create the Slider and Links

The slider is made using <div> tag. The links inside the slider are kept in seperate anchor <a> tags.
The slider has a gradient background applied on it. This gradient is created using CSS.
The gradient created using css is quite ineffective in IE, so we will use images for IE.

Here's the Html code

We will have to add class="slider" to every slider we create to animate it later with jQuery.
We will add another class="gradient_name" to each slider to apply color on it to make it single class <div class="gradient_name slider"> .
We need to put the <div class="slider"> and the <div class="button color_name"> in a same <div> element so that the slider is positioned right below the respective button.
We will create a <div class="column"> and put the <div class="button color_name"> and <div class="slider"> inside it.


<div id="container">

	
	<div class="column">
		<div class="button green">Menu option -»</div>
		<div class="green_grad slider">
		<a href="#">Green Option one</a>
		<a href="#">Green Option two</a>
		</div> <!-- .slider -->  
	</div> <!-- .column --> 
	
	
	<div class="column">
		<div class="button orange">Menu option -»</div>
		<div class="orange_grad slider">
		<a href="#">Orange Option one</a>
		<a href="#">Orange Option two</a>
		<a href="#">Orange Option three</a>
		</div> <!-- .slider -->  
	</div> <!-- .column --> 
	
	
	<div class="column">
		<div class="button violet">Menu option -»</div>
		<div class="violet_grad slider">
		<a href="#">Violet Option one</a>
		<a href="#">Violet Option two</a>
		<a href="#">Violet Option three</a>
		<a href="#">Violet Option four</a>
		</div> <!-- .slider -->  
	</div> <!-- .column --> 
	
	
	<div class="column">
		<div class="button pink">Menu option -»</div>
		<div class="pink_grad slider">
		<a href="#">Pink Option one</a>
		<a href="#">Pink Option two</a>
		<a href="#">Pink Option three</a>
		<a href="#">Pink Option four</a>
		<a href="#">Pink Option five</a>
		</div> <!-- .slider -->  
	</div> <!-- .column --> 

</div> <!-- #container -->

→ Stylesheet to position the slider.

We will now define three classes :
First class="slider" for the slider
Second class="gradient_name" for the slider
Third class="column" for the container that holds both the button and the slider.
We will also define Stylesheet for the links inside the slider.
The background of the link turns white when the mouse hovers over them.
The sliders have a fixed width and height. You need to adjust the height if you wish to add more links in it.
The gradient is created using css, IE 8 and its previous versions supports gradients but to a limit.
We can use IE specific Stylesheet Codes or use images instead on Stylesheet code for the slider background.
Here are the images that have been used for creating the background.

 <style type="text/css">

.green_grad {
   background: url(images/green.png) repeat-x;	 /* for all browsers */ 
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99DC30', endColorstr='#99DC30');		 /* Internet Explorer 6,7 and 8 */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99DC30', endColorstr='#99DC30')";	 /* Internet Explorer 8 only */ 
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(153,220,48,0.1)), to(rgba(153,220,48,1)));  /* for webkit browsers */ 
   background: -moz-linear-gradient(top, rgba(153,220,48,0.1), rgba(153,220,48,1));  /* for firefox 3.6+ */ 
   background: -o-linear-gradient(rgba(153,220,48,0.1),rgba(153,220,48,1));   /* For Opera Browsers */ 
   }
   
.orange_grad {
   background: url(images/orange.png) repeat-x;	 /*	For all browsers*/ 
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD230', endColorstr='#FFD230');		 /* Internet Explorer 6,7 and 8 */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD230', endColorstr='#FFD230')";	 /*Internet Explorer 8 only*/ 
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,210,48,0.1)), to(rgba(255,210,48,1)));		 /* for webkit browsers */ 
   background: -moz-linear-gradient(top, rgba(255,210,48,0.1), rgba(255,210,48,1));		 /* for firefox 3.6+ */ 
   background: -o-linear-gradient(top,rgba(255,210,48,0.1),rgba(255,210,48,1));  /* For Opera Browsers */ 
   }
   
.violet_grad {
   background: url(images/violet.png) repeat-x; 	 /* For all browsers */ 
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#C5B8F6', endColorstr='#C5B8F6');	 /* Internet Explorer 6,7 and 8*/ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#C5B8F6', endColorstr='#C5B8F6')";	 /* Internet Explorer 8 only*/ 
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(197,184,246,0.1)), to(rgba(197,184,246,1)));  /* for webkit browsers */ 
   background: -moz-linear-gradient(top, rgba(197,184,246,0.1), rgba(197,184,246,1));  /* for firefox 3.6+ */ 
   background: -o-linear-gradient(top,rgba(197,184,246,0.1),rgba(197,184,246,1));  /* For Opera Browsers */ 
   }
   
.pink_grad {
   background: url(images/pink.png) repeat-x;   /* For all browsers */ 
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE2192', endColorstr='#FE2192');		 /*Internet Explorer 6,7 and 8*/ 	
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE2192', endColorstr='#FE2192')"; 	 /* Internet Explorer 8 only */ 
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(254,33,146,0.1)), to(rgba(254,33,146,1)));  /* for webkit browsers */ 
   background: -moz-linear-gradient(top, rgba(254,33,146,0.1), rgba(254,33,146,1));  /* for firefox 3.6+ */ 
   background: -o-linear-gradient(top,rgba(254,33,146,0.1),rgba(254,33,146,1));   /* For Opera Browsers */ 
   }
 
.slider {
	background-color:#fff;
	width:172px;
	height:200px;
	line-height:30px;
	text-align:center;
	color: #555;
	position: absolute;
	top: -234px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	filter: alpha(opacity=0); 
	opacity:0.0; 
}
.slider a { display: block; color: #000; font-weight: bold; }
.slider a:hover { background: #f1f1f1; }
.column { float: left; margin-left: 12px; position: relative; margin-top:21px; }
 
</style>

→ jQuery for the Sliding Effect

The jQuery code will animate the slider by sliding it vertically. We have also added some FadeIn and FadeOut using opacity.

Here's the Html code

<script type="text/javascript">

$(document).ready(function(){

	$(".button" ).toggle(function(){
	var clas  = $(this).attr("class" );
		$("."+clas.replace('button ','')+"_grad" ).animate({opacity:'1',top:'50px'}, 500 )
		},
		function(){
	var clas  = $(this).attr("class" );
		$("."+clas.replace('button ','')+"_grad" ).animate({opacity:'0',top:'-300px'}, 500 );
	});

});

</script>

The Explanation

Line 3 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

Line 5 › $(".button" ).toggle(function(){
→ This will add the toggle functionality to all the <div> elements with class="button".
→ The basic toggle function looks like $("selector").toggle(function(){first statement},function(){second statement});

Line 6 › var clas = $(this).attr("class" );
→ This statement will get the value of the atttibute "class".
→ If the "Green Button" is clicked, the above statement will return "button green".
→ These are the names of two classes that were applied on the <div class="button green">.
→ button class for the Button Effect and green class for the green background color.
→ The fetched class name will be then saved in the variable clas.

[For sliding the Slider from Top to Bottom]
Line 7 ›

$("."+clas.replace('button ','')+"_grad" ).animate({opacity:'1',top:'50px'},500)
  }

→ This statement will replace the text "button" and the space from the variable clas, with "blank"
→ Then concat the remaining part with "_grad".
→ When the Green Button is clicked .
→ The variable clas will be assigned "button green" using statement on Line 6.
→ The Statement on Line 7 will replace "button green" to "green_grad".
→ The animate function will then animate it.
→ The animate function will change the opacity to "1" and change the position of the slider from "-143px" to "50px" which was set earlier in the Stylesheet code.
→ 500 is the speed of the animation in milliseconds.

[For sliding the Slider from Bottom to Top]
→ Same functionality is used to slide the Slider back to its original position.
→ Only change is the css property in the animate function which will change the opacity to "0" and position the slider back to its original position on Line 11.

Click here to download the demo

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.