Creating jQuery slideToggle Menu

Posted by | January 06, 2014 | DEMO, TUTORIALS | One Comment

In this short tutorial, we are Creating jQuery slideToggle Menu with a use of CSS & jQuery. You can see live working Demo of this code and also Grab the zip from the Download button below, open it in your favorite code editor and play it!

slideToggle-Menu

Demo Download

The HTML

In the first section of the jquery slidetoggle menu tutorial, we will write the HTML markup. It comes in the form of a standard HTML5 document which includes two additional resources that we will discuss later – the styles.css stylesheet included in head section and the script.js JavaScript file included at the end of HTML code.  Additionally, I have included the jQuery library, and the minimal ionicons icon font.

index.html


<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>jQuery slideToggle Menu</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>  

<body>              
		<!-- Main Container -->
        <div id="main-container"> 

			<!-- Dashboard -->
            <div id="dashboard" class="tab tabNoSelected"> 
                <h3><span class="ion-speedometer"></span>Dashboard</h3>
                <a href="#1" class="notification">18</a>
            </div>
            <div id="dashboardBody" class="tabBody">
                <ul class="tabBodyOptions">
                    <li><a href="#10"><span class="ion-ios7-keypad-outline"></span> Widgets</a></li>
                    <li><a href="#11"><span class="ion-ios7-pie-outline"></span> Chart</a></li>
                    <li><a href="#12"><span class="ion-document"></span> Form Stuff</a></li>
					<li><a href="#12"><span class="ion-ios7-calendar-outline"></span> Calendar</a></li>					
                </ul>                
            </div>

            
			<!-- Messages -->
            <div id="messages" class="tab tabSelected">
                <h3><span class="ion-ios7-email-outline"></span>Messages</h3>
                <a href="#3" class="notification">23</a>         
            </div>
            <div id="messagesBody" class="tabBody">                
				<ul class="tabBodyOptions">
                          <li><a href="#"><span class="ion-ios7-filing-outline"></span> Inbox</a></li>                          
                          <li><a href="#"><span class="ion-ios7-paperplane-outline"></span> Sent</a></li>                          
                          <li><a href="#"><span class="ion-ios7-trash-outline"></span> Trash</a></li>
                      </ul>
            </div>
			
			<!-- Profile -->
			<div id="profile" class="tab tabNoSelected"> 
                <h3><span class="ion-ios7-person-outline"></span>Profile</h3>
                <a href="#2" class="notification">4</a>
            </div>
            <div id="profileBody" class="tabBody"> 
                <ul class="tabBodyOptions">
					<li><a href="#22"><span class="ion-ios7-time-outline"></span> Timeline</a></li>
                    <li><a href="#20"><span class="ion-ios7-person-outline"></span> Users</a></li>
                    <li><a href="#21"><span class="ion-ios7-personadd-outline"></span> Add Contact</a></li>
					<li><a href="#22"><span class="ion-ios7-chatbubble-outline"></span> Chat</a></li>
                </ul>                
            </div>
			
			<!-- Settings -->
            <div id="settings" class="tab tabNoSelected"> 
                <h3><span class="ion-ios7-gear-outline"></span>Settings</h3>
                <a href="#4" class="notification">6</a>                
            </div>
            <div id="settingsBody" class="tabBody">
                <ul class="tabBodyOptions">
                    <li><a href="#40"><span class="ion-ios7-unlocked-outline"></span> Accounts</a></li>
                    <li><a href="#41"><span class="ion-ios7-bell-outline"></span>Notifications</a></li>
                    <li><a href="#42"><span class="ion-ios7-lightbulb-outline"></span> Alerts</a></li>
                </ul>                
            </div>

        </div>
		<!-- Main Container end -->
</body>

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

</body>

</html>

The HTML markup of jquery slidetoggle menu is pretty much simple, #main-container have Menu.

First div contain parent menu.

<div id="dashboard" class="tab tabNoSelected">
                <h3><span class="ion-speedometer"></span>Dashboard</h3>
                <a href="#1" class="notification">18</a>
</div>

And the second div contain child menu with icon and anchor tag.

<div id="dashboardBody" class="tabBody">
                <ul class="tabBodyOptions">
                    <li><a href="#10"><span class="ion-ios7-keypad-outline"></span> Widgets</a></li>
                    <li><a href="#11"><span class="ion-ios7-pie-outline"></span> Chart</a></li>
                    <li><a href="#12"><span class="ion-document"></span> Form Stuff</a></li>
					<li><a href="#12"><span class="ion-ios7-calendar-outline"></span> Calendar</a></li>
                </ul>
</div>

The CSS

In this demo CSS is also much simple, we used simple CSS with transition effect.
The first thing we have to do, is to create a stacking context on the body element. Also as I said we have used custom font icon so include its css first using @import url method.

#main-container contain the menu elements, so its aligned center with rounded corner border.


@import url(ionicons.min.css);

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	background: #d3d4d6;
}
a {
	text-decoration: none;
	font-family: sans-serif;	
	font-weight: bold;
}
span {
	font-size: 22px;
	font-weight: normal;
	padding-right: 16px;	
}

#main-container {
	width: 310px;
	height: 330px;
	margin: 3em auto;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}
  • .tab : class (menu header) applied width and height with transition effect.
  • .tab h3 : Menu Header text applied fort size, line height, cursor type and transition effect.
  • .notification : class applied for notification right side of menu header text having border radius to look it rounded, text align, font size and transition effect.
.tab {
		width: 310px;
		height: 55px;
		-webkit-transition: background .1s ease-out;
		-moz-transition: background .1s ease-out;
		-o-transition: background .1s ease-out;
		-ms-transition: background .1s ease-out;
		transition: background .1s ease-out;
	}
		.tab h3 {
			margin: 0 0 0 20px;
			line-height: 50px;
			cursor: pointer;
			font-size: 16px;
			font-family: sans-serif;
			display: inline-block;
			float: left;
			-webkit-transition: color .1s ease-out;
			-moz-transition: color .1s ease-out;
			-o-transition: color .1s ease-out;
			-ms-transition: color .1s ease-out;
			transition: color .1s ease-out;
			}
			.notification {
				display: inline-block;
				width: 39px;
				line-height: 24px;
				float: right;
				margin: 15px 15px;
				text-align: center;
				color: #ffffff;
				font-size: 11px;			
				-webkit-border-radius: 25px;
				-moz-border-radius: 25px;
				border-radius: 25px;
				-webkit-transition: background .1s ease-out;
				-moz-transition: background .1s ease-out;
				-o-transition: background .1s ease-out;
				-ms-transition: background .1s ease-out;
				transition: background .1s ease-out;
			}
  • .tabSelected : class having selected menu header css, It apply effect to header text .tabSelected h3 and selected tab notification. tabSelected .notification
  • .tabNoSelected : is the same class explained above and apply css for not selected menu elements. Both of this class applied to Menu parent title element.
  • .tabBody : class applied to child element of menu title. It also contain .tabBodyOptions , .tabBodyOptions a and .tabBodyOptions span.
.tabSelected {
		background: #007AFF;
	}
		.tabSelected h3 {
			color: #ffffff;
		}
		.tabSelected .notification {
			background: #2F90FA;			
		}
			.tabSelected .notification:hover {
				background: #2F90FA;
			}
	.tabNoSelected {
		background: #ffffff;
		border-bottom: solid 1px #e6e6e6;	
	}
		.tabNoSelected:hover {
			border: solid 1px #F2F2F2;
		}
		.tabNoSelected h3 {
			color: #363a3d;
		}
		.tabNoSelected .notification {
			background: #dcdddf;
		}
			.tabNoSelected .notification:hover {
				background: #2F90FA;
			}
	.tabBody {
		background: #2F90FA;
		width: 310px;
		height: auto;
		display: none;
		border-top: solid 1px #3C99FF;
	}
		.tabBodyOptions {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		.tabBodyOptions a {
			display: block;
			color: #fce7e4;
			font-size: 13px;
			line-height: 32px;
			width: 310px;
			padding-left: 20px;
			-webkit-transition: background .3s ease-out;
			-moz-transition: background .3s ease-out;
			-o-transition: background .3s ease-out;
			-ms-transition: background .3s ease-out;
			transition: background .3s ease-out;
		}
			.tabBodyOptions a:hover {
				background: #007AFF;
				color: #ffffff;
			}
		.tabBodyOptions span {
			font-size: 20px;
		}

lets combining whole CSS code.

style.css


@import url(ionicons.min.css);

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	background: #d3d4d6;
}
a {
	text-decoration: none;
	font-family: sans-serif;	
	font-weight: bold;
}
span {
	font-size: 22px;
	font-weight: normal;
	padding-right: 16px;	
}

#main-container {
	width: 310px;
	height: 330px;
	margin: 3em auto;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}
	.tab {
		width: 310px;
		height: 55px;
		-webkit-transition: background .1s ease-out;
		-moz-transition: background .1s ease-out;
		-o-transition: background .1s ease-out;
		-ms-transition: background .1s ease-out;
		transition: background .1s ease-out;
	}
		.tab h3 {
			margin: 0 0 0 20px;
			line-height: 50px;
			cursor: pointer;
			font-size: 16px;
			font-family: sans-serif;
			display: inline-block;
			float: left;
			-webkit-transition: color .1s ease-out;
			-moz-transition: color .1s ease-out;
			-o-transition: color .1s ease-out;
			-ms-transition: color .1s ease-out;
			transition: color .1s ease-out;
			}
			.notification {
				display: inline-block;
				width: 39px;
				line-height: 24px;
				float: right;
				margin: 15px 15px;
				text-align: center;
				color: #ffffff;
				font-size: 11px;			
				-webkit-border-radius: 25px;
				-moz-border-radius: 25px;
				border-radius: 25px;
				-webkit-transition: background .1s ease-out;
				-moz-transition: background .1s ease-out;
				-o-transition: background .1s ease-out;
				-ms-transition: background .1s ease-out;
				transition: background .1s ease-out;
			}
	.tabSelected {
		background: #007AFF;
	}
		.tabSelected h3 {
			color: #ffffff;
		}
		.tabSelected .notification {
			background: #2F90FA;			
		}
			.tabSelected .notification:hover {
				background: #2F90FA;
			}
	.tabNoSelected {
		background: #ffffff;
		border-bottom: solid 1px #e6e6e6;	
	}
		.tabNoSelected:hover {
			border: solid 1px #F2F2F2;
		}
		.tabNoSelected h3 {
			color: #363a3d;
		}
		.tabNoSelected .notification {
			background: #dcdddf;
		}
			.tabNoSelected .notification:hover {
				background: #2F90FA;
			}
	.tabBody {
		background: #2F90FA;
		width: 310px;
		height: auto;
		display: none;
		border-top: solid 1px #3C99FF;
	}
		.tabBodyOptions {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		.tabBodyOptions a {
			display: block;
			color: #fce7e4;
			font-size: 13px;
			line-height: 32px;
			width: 310px;
			padding-left: 20px;
			-webkit-transition: background .3s ease-out;
			-moz-transition: background .3s ease-out;
			-o-transition: background .3s ease-out;
			-ms-transition: background .3s ease-out;
			transition: background .3s ease-out;
		}
			.tabBodyOptions a:hover {
				background: #007AFF;
				color: #ffffff;
			}
		.tabBodyOptions span {
			font-size: 20px;
		}

The jQuery Code

In this part of the tutorial, we are going to write the jQuery code to make the menu work like slide Toggle.

script.js

$(document).ready(function() {

$("#messagesBody").slideToggle("fast"); // The Body of "Messages" is already opened in the design sample.

  $("#dashboard").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#dashboardBody").slideToggle("fast");
  });
    $("#profile").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#profileBody").slideToggle("fast");
  });
  $("#messages").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#messagesBody").slideToggle("fast");
  });
  $("#settings").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#settingsBody").slideToggle("fast");
  });
});
  • Each parent menu title have unique ID like #profile or #message and on click of that we expand the child menu items.
  • On .tab first we remove .tabSelected class using removeClass jQuery method and then add .tabNoSelected class.
  • $(this) is used for applying effect on ID we are referring. In JavaScript this always refers to the “owner” of the function we’re executing. We remove .tabNoSelected and add .tabSelected class to that element.
  • $(“.tabBody”).slideUp(“fast”); The .slideUp() method animates the height of the matched elements. In our example we use this method to slide up .tabBody class element.
  • $(“#settingsBody”).slideToggle(“fast”); The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. We use it to apply slide toggle effect to #settingsBody element (child elements of menu).

Demo Download

We’re Done!

The code we wrote today is jquery slidetoggle menu ready for customize, you can see the featured image of this post having different color menu. Simply open styles.css in your favorite code editor and change the colors, fonts or styles so they match your site. Change the menu elements and icons by editing the HTML and the data attributes. Or you can even improve the code with some cool new effects and feature. But don’t forget to share it in the comment section ;)

About Ajay Patel

I am passionate about web and mobile development. I love playing around with the latest technologies in our industry. I works mostly in PHP and CMS like WordPress, Joomla. I am Founder and Content writer of TutsInstitute. Now working as Web & Mobile App Developer.

One Comment

Leave a Reply