Introduction:
This article explain you to create accordion menu using jQuery and css .
Description:
Below code is used for creating a vertical collapsible/accordion menu that allows to expand and collapse.
To implement this we need to write the code like as shown below
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/collapsemenu.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts-common/jquery-2.1.4.js"></script>
</head>
<body>
<div class="header">
</div>
<div id="sliderNavigation" style="border: 0px solid #000;">
<div class="page_container_left font" style="border: 0px solid #000;" id="containernavigation">
<div id="admin_menu" runat="server">
<div id="setting_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('setting_menu')">
<a class="setting_tab">Setting</a>
</div>
<div id="setting_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#">Setting</a>
<a class="collapsemenu_item" href="#">Setting</a>
<a class="collapsemenu_item" href="#">Setting</a>
<a class="collapsemenu_item" href="#">Setting</a>
<a class="collapsemenu_item" href="#">Setting</a>
<a class="collapsemenu_item" href="#">Setting</a>
<a class="collapsemenu_item" href="#">Setting</a>
</div>
<div id="home_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('home_menu')">
<a class="setting_tab">Home</a>
</div>
<div id="home_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#">Home</a>
<a class="collapsemenu_item" href="#">Home</a>
<a class="collapsemenu_item" href="#">Home</a>
<a class="collapsemenu_item" href="#">Home</a>
<a class="collapsemenu_item" href="#">Home</a>
<a class="collapsemenu_item" href="#">Home</a>
<a class="collapsemenu_item" href="#">Home</a>
</div>
<div id="about_tab" runat="server" clientidmode="Static" class="collapse_button collapse_button_gradient" onmouseover="this.className='collapse_button collapse_button_gradient_hover'" onmouseout="this.className='collapse_button collapse_button_gradient'" onclick="expand('about_menu')">
<a class="setting_tab">About</a>
</div>
<div id="about_menu" class="collapsemenu">
<a class="collapsemenu_item" href="#">About</a>
<a class="collapsemenu_item" href="#">About</a>
<a class="collapsemenu_item" href="#">About</a>
<a class="collapsemenu_item" href="#">About</a>
<a class="collapsemenu_item" href="#">About</a>
<a class="collapsemenu_item" href="#">About</a>
<a class="collapsemenu_item" href="#">About</a>
</div>
</div>
</div>
<div style="border: 0px solid #000;" id="containerview" class="page_container">
</div>
</div>
<div class="footer">
© 2016 www.logicspark.in All Rights Reserved. The content is copyrighted to Muhammad Asif.
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS", Verdana;
font-size: 13px;
font-weight: normal;
color: #4D5569; /*4D5569*/
background-color: #EAF2F9;
}
.header {
height: 35px;
border-bottom: solid 1px rgba(255,255,255,1);
background-color: #fff;
color: #969696;
z-index: 1;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgb(89,106,114); /* Old browsers */
background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 2%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#cedce7',GradientType=1 ); /* IE6-9 */
}
.footer {
width: 100%;
bottom: 0px;
position: fixed;
text-align: center;
height: 30px;
font-weight: bold;
font-family: "Trebuchet MS", Verdana;
font-size: 13px;
background: rgb(89,106,114); /* Old browsers */
background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 2%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#cedce7',GradientType=1 ); /* IE6-9 */
}
collapsemenu css
.collapse_button {
height: 35px;
width: 100%;
line-height: 30px;
border: solid 0px 0px 0px 0px #172b37;
cursor: pointer;
font-size: 13px;
font-weight: normal;
color: #000;
background-color: #40535E;
padding-left: 5px;
z-index: 1000;
}
.collapse_button a:hover {
text-decoration: none;
}
.collapsemenu {
display: none;
width: 100%;
margin: auto;
margin-bottom: 0px;
margin-top: 0px;
padding: 1px;
z-index: -1000;
overflow: auto;
}
.collapsemenu_item {
display: block;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
border-bottom: solid 1px #d5d3d3;
height: 30px;
white-space: nowrap;
z-index: -1000;
width: 100%;
color: #4D5569;
text-decoration: none !important;
}
.collapsemenu_item:hover {
color: #000;
text-decoration: none;
}
.collapse_button_gradient {
border: 1px solid #e2e2e2;
background: rgb(89,106,114); /* Old browsers */
background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 2%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#cedce7',GradientType=1 ); /* IE6-9 */
}
.collapse_button_gradient_hover {
border: 1px solid #e2e2e2;
background: rgb(89,106,114); /* Old browsers */
background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 2%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(89,106,114,1) 0%,rgba(206,220,231,1) 2%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#cedce7',GradientType=1 ); /* IE6-9 */
}
/*menu icon*/
.setting_tab {
background: url(images/menu-settings.png) no-repeat,url(images/menu-arrow.png) no-repeat;
background-position: 5px center,140px center;
display: block;
text-indent: 30px;
white-space: nowrap;
font-weight: bold;
}
Java Scipt :
var flag = 0;
var slidedMenuId = "";
function expand(menuid) {
if (slidedMenuId != menuid) {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideDown(400);
slidedMenuId = menuid;
}
else {
$(".collapsemenu").slideUp(400);
$('#' + menuid).slideUp(400);
slidedMenuId = "";
}
}
No comments:
Post a Comment