Sliding menus with Jquery

Posted by Montu on February 26, 2009

I have been avoiding Jquery for quite some time. I was just turning myself blind to Jquery. Jaquery? What Jquery? :-/

Damn it! I have been spelling jQuery as Jquery. :D

I wanted some thing similar to accordion effect. There are tons of JavaScript frameworks offering this but I didnt want myself to be again copying huge/minified file/s and then reading hell lot of documentations figuring out how and why and ….

Phew #:-S

Now following is a snippet of code from my dear Kaddu. Obviously you will need jQuery.

<html>
<head><title>Tree</title>
<script type="text/javascript" language="javascript" src="js/jquery.js“></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function(){
$(’.level-1′).hide();
$(’.top’).css(’cursor’,'pointer’).bind(’click’,viewList);
});
this.viewList = function (){
var id	 = $(this).attr(’id’);
var spId = id.split(’_');
$(’#ul_’+spId[1]).slideToggle();
}
</script>
</head>
<body>
<ul>
<li class=”top” id=”li_1″> 1
<ul class=”level-1″ id=”ul_1″> <li>1.1</li>
<ol>
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</ol>
</ul>
</li>
<li class=”top” id=”li_2″> 2
<ul class=”level-1″ id=”ul_2″> <li>2.1</li>
<ol>
<li>2.1.1</li>
<li>2.1.2</li>
<li>2.1.3</li>
</ol>
</ul>
</li>
<li class=”top” id=”li_3″> 3
<ul class=”level-1″ id=”ul_3″> <li>3.1</li>
<ol>
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ol>
</ul>
</li>
</ul>
</body>
</html>

Now, you can change lis to divs to spans to ps or what not. You just need IDs and thats it. You have a sliding menu. :-)

 
Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

  1. Shameless Self Promotion ;-) ™ © ℠ ® » Blog Archive » Drop down menus with jQuery Wed, 18 Mar 2009 23:35:00 PDT

    […] attempting sliding menus with jQuery I developed drop down menus using […]

  2. Drop down menus with jQuery – LAMP Web Development Blog Fri, 21 Aug 2009 01:32:03 PDT

    […] attempting sliding menus with jQuery I developed drop down menus using […]

Comments


Fine Print: In very short I own my views & if you don't like something on my blog, I am sorry, I can't help you. In fact I am not even sorry. Ch33r5.