<html>
<head>
<title>Toggle</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
.right-menu {float:left; width:230px; padding:15px 0 0 0;}
.right-basicmenu{float:left; width:230px; padding-top:5px;}
.right-basicmenu a, .right-basicmenu a:visited {width:220px; display:block; padding:10px 0 10px 10px; color:#fff; font-size:138.5%; background-color:#016ea7; font-family:"Myriad Pro";}
.right-basicmenu a.rsel, .right-basicmenu a.rsel:visited {font-size:138.5%; font-weight:bold; color:#fff; background-color:#016ea7; font-family:"Myriad Pro";}
ul.style {list-style:none; padding:0; margin:0;}
ul.style li{list-style:none;}
.right-submenu {float:left; width:200px; padding-left:30px; margin-top:5px; background-color:#eef9ff;}
.right-submenu li a, .right-submenu li a:visited {width:200px; padding:6px 0; color:#000; font-size:108%; font-family:"Myriad Pro"; background:none;}
.right-submenu a.submenusel, .right-submenu a.submenusel:visited {color:#0c499c; font-size:108%; font-family:"Myriad Pro"}
</style>
</head>
<body>
<div class="right-menu" id="right-menu">
<div class="right-basicmenu">
<a href="javascript:void(0);">Adventure Tours</a>
<div class="right-submenu">
<ul class="style">
<li><a href="javascript:void(0)">*Fishing</a></li>
<li><a href="javascript:void(0)" class="submenusel">*Mountaineerig</a></li>
<li><a href="javascript:void(0)">*Walking</a></li>
<li><a href="javascript:void(0)">*Horse riding</a></li>
<li><a href="javascript:void(0)">*Camel riding</a></li>
<li><a href="javascript:void(0)">*Biking</a></li>
<li><a href="javascript:void(0)">*Film making</a></li>
<li><a href="javascript:void(0)">*Jeep sarari</a></li>
</ul>
</div>
</div>
<div class="right-basicmenu">
<a href="javascript:void(0);">Culture Tours</a>
<div class="right-submenu">
<ul class="style">
<li><a href="javascript:void(0)">*Fishing</a></li>
<li><a href="javascript:void(0)">*Mountaineerig</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function clickon(){
var $p = $(this).parent();
var iam = false;
$('#right-menu .right-basicmenu').filter(function(){
return $(this).data("clicked");
}).each(function () {
if ($(this).data("clicked")) {
$(this).data("clicked",false);
$($(this).children().get(1)).slideUp("slow");
iam = $(this).data("index")==$p.data("index");
}
});
if (!iam) {
$p.data("clicked",!$p.data("clicked"));
if($p.data("clicked"))
$(this).next().slideDown("slow");
else
$(this).next().slideUp("slow");
}
}
$('#right-menu .right-basicmenu').each(function(i){
$(this).data("clicked",false);
$(this).data("index",i);
var $a = $($(this).children().get(0));
$a.click(clickon);
$a.next().slideUp("fast");
});
</script>
</body>
</html>
No comments:
Post a Comment