Thursday, December 16, 2010

JQuery slideUp down Nav Menu simple

<html>
<head>
    <title>Toggle</title>
    <script type="text/javascript" src="jquery-1.4.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: