Thursday, 12 September 2013

Toggling jquery submenu items

Toggling jquery submenu items

When I am trying to toggle the SubMenu item, the item toggles but the
first level menu is closed. The menu should not hide when the person
clicks on the sub menu item. for example if you click on SSNIT and goto
"core services" the sub menu appears but the first level menu item is
closed. Need some expertise for this fix? You can view the code on
JSFiddle here http://jsfiddle.net/3aRSr/.
HTML
:
<div id="container">
<div style="display: inline-block">
<ul id="menu">
<li><a href="">Home</a></li>
<li>
<a href="#">SSNIT</a>
<ul>
<li>
<a href="">About SSNIT</a>
</li>
<li>
<a href="/Pages/new-ssnit.aspx">New SSNIT</a>
</li>
<li>
<a href="">Board of Trustees</a>
</li>
<li>
<a href="#">Core Services</a>
<ul>
<li><a href="/">Membership</a></li>
<li><a href="/">Investments</a></li>
<li><a href="/">Benefits</a></li>
<li><a href="/x">Students Loan</a></li>
</ul>
</li>
<li>
<a href="/">Executive Committee</a>
</li>
<li>
<a href="">Mission and Vision</a>
</li>
</ul>
</li>
<li><a href="">Statistics</a></li>
<li><a href="">News</a></li>
<li><a href="">Resources</a></li>
<li>
<a href="#">Self Services</a>
<ul>
<li>
<a href="#">Benefit Application</a>
</li>
<li>
<a href="#">Employer Enrolment</a>
</li>
<li>
<a href="#">Member Enrolment</a>
</li>
</ul>
</li>
<li><a href="">FAQs</a></li>
<li>
<a href="#">Contact Us</a>
<ul>
<li>
<a href="/">Contact Information</a>
</li>
<li>
<a href="/">Customer Service Locations</a>
</li>
<li>
<a href="/">Telephone Directory</a>
</li>
<li>
<a href="/">SSNIT Locations Map</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#menu, #menu2, #container {
width: 100%;
margin: 0;
padding: 1px 0 0 0;
list-style: none;
background: #DCDCDC;
}
#menu li, #menu2 li {
float: left;
padding: 0 0 0 0;
position: relative;
line-height: 0;
}
#menu a, #menu2 a {
float: left;
height: 25px;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
color: #403E3F;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
#menu li:hover > a, #menu2 li:hover > a {
color: #fafafa;
}
#menu li a:hover, #menu2 li a:hover /* IE6 */ {
color: #fafafa;
}
#menu li:hover > ul, #menu2 li:hover > ul {
/*display: block;*/
}
/* Sub-menu */
#menu ul, #menu2 ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 40px; /* louis: 50px */
left: 0;
z-index: 99999;
background: #DCDCDC;
}
#menu ul ul, #menu2 ul ul {
top: 0px;
left: 195px; /* louis: 160px */
}
#menu ul li, #menu2 ul li {
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child, #menu2 ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a, #menu2 ul a {
padding: 10px;
height: 10px;
width: 165px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a, #menu2 ul a /* IE6 */ {
height: 10px;
}
*:first-child + html #menu ul a, *:first-child + html #menu2
ul a /* IE7 */ {
height: 10px;
}
#menu ul a:hover, #menu2 ul a:hover {
background: #0186ba;
}
#menu ul li:first-child > a, #menu2 ul li:first-child > a {
}
#menu ul li:first-child > a:after, #menu2 ul
li:first-child > a:after {
content: '';
position: absolute;
left: 30px;
top: -10px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 16px solid #DCDCDC;
}
#menu ul ul li:first-child a:after, #menu2 ul ul
li:first-child a:after {
left: -10px;
top: 5px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 12px solid transparent;
border-top: 12px solid transparent;
border-right: 16px solid #DCDCDC;
}
#menu ul li:first-child a:hover:after, #menu2 ul
li:first-child a:hover:after {
border-bottom-color: #0186ba;
}
#menu ul ul li:first-child a:hover:after, #menu2 ul ul
li:first-child a:hover:after {
border-right-color: #0186ba;
border-bottom-color: transparent;
}
#menu ul li:last-child > a, #menu2 ul li:last-child > a {
}
Clear floated elements #menu:after, #menu2:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu, * html #menu2 {
zoom: 1;
}
IE6 *:first-child + html #menu, *:first-child + html #menu2 {
zoom: 1;
}
JavaScript:
$(document).ready(function () {
$("#menu ul li, #menu > li ul li").click(function () {
//mouse click toggle menu items
$('>ul').toggle(
// mouseover
function () {
$(this).find('>ul').fadeIn('slow');
});
});
});

No comments:

Post a Comment