Home  »  Making accordion menu using jquery

Making accordion menu using jquery

Advertisement

Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Live Demo of accordion menu using jQuery

HTML structure for accordion menu using jQuery

<div id="firstpane" class="menu_list">
  <p class="menu_head">Header-1</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-2</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-3</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
   </div>
</div>

As you can see the structure, the elements of the menu are inside the div with class “menu_list”. And each blocks of menu contains the header with class “menu_head” and div with class “menu_body”. Note that, there is another pane with the id “secondpane” whose code is similar as above and not posted above.

CSS code for accordion menu using jQuery

.menu_list {
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
}

I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight forward and you can change is according to your need. Note that, the display property in “menu_body” is set to “hidden” so that the menu links are hidden when the page is loaded. Furthermore, the display property in the link inside “menu_body” class is set to “block” so that each menu appears in new line. You can see a image in the “menu_head” class, this is the image which gets changes with the visibility of the menu item in each menu’s head.

I’ve used the images from sweetie icon pack, you can download the other beautiful icon from the their website.

Javascript Code using jQuery

Now finally look at the JavaScript code to accomplish this, first of we need to import the jQuery library

<script type="text/javascript" language="javascript" src="jquery.js"></script>

And, then we need to write few lines of simple code in jQuery to do this, let’s look at the jquery code of the first accordion menu whose visibility gets toggled on the mouse click event on each header,

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
});

When the paragraph with class “menu_head” inside the element with the id “firstpane” gets clicked, the background image of it changed to down arrow. And then, next div with class “menu_body” gets slided in toggling it’s visibility. Furthermore, the other sibling’s div with class “menu_body” gets slided up. And then, the background image of the other sibling’s of “p” is changed to left arrow. Now look at the code of the accordion menu under mouse over effect.

//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
   $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
   $(this).siblings().css({backgroundImage:"url(left.png)"});
});

This code is preety similar to the above code but the difference is only that this accordion menu works on the mouse over effect whereas the above accordion menu works on the mouse click event.

Download Source Code

If you want to learn more about jQuery then you can check the following books and buy them.I really recommend the book “jQuery in Action” for starting your way for jQuery.

Learning Jquery: Better Interaction Design and Web Development with Simple JavaScript Techniques


Jquery in Action

Popularity: 100% [?]

Tags: , ,

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

Related Posts

» Help me to become the first Blogging Idol
» How to disable context menu in browsers ?
» Sleek and Smooth animated menu using jQuery
» How to make accordion using jquery and css

202 Comments on “Making accordion menu using jquery”

  • Steve Mulder wrote on 2 June, 2008, 11:10

    What I particularly like about these accordions is that they don’t force the content below to drop down. In other words, everything keeps its place. That is how an accordion should work. Very nice, Roshan.
  • Roshan wrote on 2 June, 2008, 12:03

    Thanks steve
  • sandra wrote on 3 June, 2008, 8:29

    Hey Good one!
  • Baz L wrote on 3 June, 2008, 18:02

    Now, I’m confused.

    So if this is two lines of code, why is there an entire accordion plugin for jQuery?

    Well, ThanX for that!
  • Roshan wrote on 4 June, 2008, 4:41

    hey Baz..thanks for this it’s upto you what to use the plugin or the small piece of code .. this is just a simple piece of accordion menu..the other plugin might have other facility with them I think..
  • Abs wrote on 8 June, 2008, 16:12

    Hi Roshan,

    This is excellent! If I wanted Header-2 to be opened as standard (before it is clicked), is this possible?

    Many Thanks.

    Keep up the good work!
  • Roshan wrote on 8 June, 2008, 16:40

    you can use jquery’s selector to do this such as..

    $(‘.menu_body:eq(2)’).show();

    to do this
  • Abs wrote on 8 June, 2008, 19:52

    Thanks Roshan, that works brilliantly!
  • Abs wrote on 10 June, 2008, 19:10

    Hi Roshan,

    Do you know if I can colour the selected menu_head in a different background colour to differentiate it from the rest that are not selected?

    Thanks

    Abs
  • Omar wrote on 10 June, 2008, 22:20

    Can you control the menu so that when you follow a link the menu stays open?
  • Roshan wrote on 11 June, 2008, 4:21

    @abs – yes you can use the css property for this

    $(this).css({backgroundImage:”url(down.png)”})
    can be replaced with
    $(this).css({backgroundImage:”url(down.png),backgroundColor:”#cccccc”"}).

    @omar – for that you need to store the data in cookie or have to use ajax and save the state in database
  • Obistyle wrote on 13 June, 2008, 18:07

    I like to know how i can make the first menu item active?

    Simular question has already been asked by Abs, but i don’t understand the answer of Roshan…

    “you can use jquery’s selector to do this such as.
    $(’.menu_body:eq(2)’).show();
    to do this”

    I don’t know where to put that code.

    Please help!
  • Roshan wrote on 14 June, 2008, 15:12

    well you can put the following code like this

    $(document).ready(function()
    {
    $(‘.menu_body:eq(0)’).show();
  • Obistyle wrote on 16 June, 2008, 7:55

    Thank you. It works!

    Only thing is that you have to use double quotes instead of single quote.
  • rossco wrote on 23 June, 2008, 12:00

    Hello, I like the roll-over effect for the accordion… looks great. I have an ajax search function on my site that uses mootools 1.11 and I’ve tried a mootools and another jquery accordion but both are conflicting with the search. I was wondering if you have tested your accordion with other libraries or if you have an idea of how to make it work with mootools? I have tried the simple no conflict line for jquery but this didn’t help with the other accordion menu I tried. I’m no programmer so if you have any info that would be super. Thanks!
  • rossco wrote on 23 June, 2008, 12:54

    Ok update… I managed to get the mootools and jquery library working together just fine. What I would like to know is how I can keep each accordion open when each is click and only have them shut when they are clicked when already expanded? Is this possible?

    Great work
  • rossco wrote on 23 June, 2008, 13:04

    Sorry, I totally forgot to add a question! Forgive the spam lol.

    I was wondering how I could make the first pane load being extended already? So people can see the options on display for that page?
  • Roshan wrote on 23 June, 2008, 15:56

    rossco..you’ve to use ajax to make the accordion still to be opened when the link is clicked and you can see the answers in the comment above to see how can you make first pane load being extended already….

    please read the comment above carefully….
  • rossco wrote on 23 June, 2008, 16:26

    Thanks for the prompt reply… I have this as my code. Bear in mind i’m using the no conflict idea for jquery.

    var $j = jQuery.noConflict();
    $j(document).ready(function()
    {
    $j(’.menu_body:eq(0)’).show();
    {
    //slides the element with class “menu_body” when paragraph with class “menu_head” is clicked
    $j(“#firstpane p.menu_head”).click(function()
    {
    $j(this).css({}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $j(this).siblings().css({});
    });
    //slides the element with class “menu_body” when mouse is over the paragraph
    $j(“#secondpane p.menu_head”).mouseover(function()
    {
    $j(this).css({}).next(“div.menu_body”).slideDown(500).siblings(“div.menu_body”).slideUp(“slow”);
    $j(this).siblings().css({});
    });
    });

    This didn’t work. Any help would be great. Thanks.
  • rossco wrote on 23 June, 2008, 16:44

    I’m an idiot, ok. I managed to get it working!

    I understand that you change the number in the () to represent which area to leave open. I’m using this accordion as a menu, could you write up a tut on how to either use a cookie or ajax so the menu knows which part to leave extended?

    You can delete my above post if you wish. lol
    Thanks
  • Roshan wrote on 23 June, 2008, 18:20

    Hi rossco, I’ll post how to use this menu with ajax as soon I get the time…
  • PJ wrote on 24 June, 2008, 21:03

    Roshan,

    Thank you for such an easy to use menu utility. I’ve added it to my page and it works great. I do have one question (need help): how can I update the code (what do I need to change) so that the menu goes away (hides) when the mouse is moved away from the menu? Currently the menu comes up okay, but it stays up when I go to other places in the page.

    Thank you,

    PJ
  • Carol Deckelbaum wrote on 3 July, 2008, 20:39

    My question is similar to Abs – I now understand how to force a pane to be open, but how can I keep it open even when one of the other main menu heads are clicked?

    Thanks,
    Carol
  • Roshan wrote on 4 July, 2008, 4:45

    @carol – why don’t you check the following link for that …

    roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html
  • Dave wrote on 21 July, 2008, 12:35

    I’ve got the accordion working fine with the first pane opening when the page loads. I can’t seem to get the left/down icon to be correct on the first opening pane. It has the left icon showing where the down should be. After a few clicks the first pane toggles correctly, but is flipped (left/down icons) because the first pane is already open.
    How do I get first open pane (Icon) when the page loads to have the down arrow show instead of the default left?
  • Roshan wrote on 22 July, 2008, 16:58

    $(this).css({backgroundImage:”url(down.png)”})

    that css function changes the background image…you can check the jquery documentation for detail information…
  • Dave wrote on 23 July, 2008, 18:01

    $(document).ready(function()
    {
    $(“.menu_body:eq(0)”).show();
    //slides the element with class “menu_body” when paragraph with class “menu_head” is clicked
    $(“#firstpane p.menu_head”).click(function()
    {
    $(this).css({backgroundImage:”url(down.png)”}).next(“div.menu_body”)
    .slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(this).siblings().css({backgroundImage:”url(left.png)”});
    });
    });

    This is the code that I have on my site. It has the first pane open when the page loads, but the arrow for the first pane is pointing left instead of down. Any ideas of how can I get the arrow pointing down on the first pane when a page first loads. It seems when you click on the other toggle header panes the arrows will correct themselves, but that first page load and the open toggle icon will always point left instead of down. Any ideas of how to correct that first pane from loading the left arrow?
  • Roshan wrote on 23 July, 2008, 19:10

    $(”.menu_body:eq(0)”).show();
    after that add this line..
    $(“.menu_head:eq(0)”).css({backgroundImage:”url(down.png)”})
  • Dave wrote on 23 July, 2008, 19:25

    Thanks Roshan, That bit of code worked great.
  • Peter wrote on 29 July, 2008, 8:18

    Great Job: I´ve a firstpane, with “menu_head”, a secondpane with class “menu_body” but how can I open a thirdpane bellow Link-2 or Link-3? Thank you very much
  • Peter wrote on 29 July, 2008, 17:25

    Sorry: I´d like to say a “thirdpane after Link-1, Link-2 or Link-3. Thank you very much
  • Manish Patel wrote on 29 July, 2008, 19:08

    Hi
    I am trying build accordion menu using jquery. it works fine on Firefox PC but, but on ie accordion didn’t collapsed it self, you have to click again on same link, otherwise it open all accordion.

    I am also testing on Safari and Firefox on Mac, when i click on accordion it doesn’t expand. If i clicked few times it works. If anybody have idea about this kind of bug please help me.

    I hope you will find solution.
    Thanks Roshan

    Manish
  • Roshan wrote on 30 July, 2008, 4:25

    @peter – I’ve already told the answer above but here the answer again…put the following code

    $(document).ready(function()
    {
    $(’.menu_body:eq(0)’).show();

    where 0 for first pane, 1 for second and 2 for third pane..

    @Manish – if you download the code and run in internet explorer, it is running perfectly without any problem …
  • Peter wrote on 30 July, 2008, 10:20

    HEADER-1
    **Link-1
    **Link-2
    ******Link-a
    ******Link-b
    ******Link-c
    **Link-3
    HEADER-2
    HEADER-3
  • Manish wrote on 30 July, 2008, 20:06

    Thanks Roshan

    Its works now, but i have issue on Mac safari 2.0, when i click first time on accordion it don’t expand but if i click on another accordion and the it expand. it works fine on Mac safari 3.0.

    Thanks

    Manish
  • tristen wrote on 11 August, 2008, 20:27

    Hey Roshan

    Thanks for this. And your long list of answers to comments.

    I’m stuck on implementing this in Drupal and wonder if you have a quick solution for it.

    I’m entering in the following code:

    What am I missing to get this to work?
    I get the following error:

    Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in E:\”path”\includes\common.inc(1355) : eval()’d code on line 3
  • tristen wrote on 11 August, 2008, 20:30

    Ahhh … no php? sorry for the spam

    Whoops! Guess I missed the jquery code.
    It’s this:

    drupal_add_js(

    $(document).ready(function(){
    $(”.menu_body:eq(0)”).show();
    $(”.menu_head:eq(0)”).css({backgroundImage:”url(pathtoimage/down.png)”})

    $(”#firstpane p.menu_head”).click(function(){
    $(this).css({backgroundImage:”url(pathtoimage/down.png)”})

    .next(”div.menu_body”)
    .slideToggle(300).siblings(”div.menu_body”).slideUp(”slow”);
    $(this).siblings().css({backgroundImage:”url(pathtoimage/left.png)”});
    });
  • Roshan wrote on 12 August, 2008, 17:18

    @tristen- seems that you’re having the eval() of PHP with the “$” sing of jquery library.

    try isng jquery instead of $ in above code like
    “jQuery(document).ready” .. hope it helps
  • tristen wrote on 14 August, 2008, 3:05

    Thanks Roshan!

    I started thinking about that and the trick was to wrap the jquery with ‘

    (php starts)

    drupal_add_js(
    ‘
    jquery goes here.
    ‘

    ‘inline’
    );

    (php ends)
  • deep wrote on 14 August, 2008, 11:37

    Hi Roshan,
    This is a good piece of code. I shall be adding it to http://www.downloadjavascripts.com.
  • Christian Philippsen wrote on 20 August, 2008, 6:27

    Oh, i would love this accordion menu in a underordered list.
  • Roshan wrote on 20 August, 2008, 9:13

    @christian – yes that would have been the better if I would have have used unordered list in this accordion menu
  • Christian Philippsen wrote on 20 August, 2008, 12:09

    @roshan – oh typo, yes it was of course a unordered list I referred to :)

    It sure would have been more easy for integration in a CMS like Joomla. Otherwise great script.
  • Bryson Justus wrote on 27 August, 2008, 19:47

    If you click on Header-1 to open a section then click Header-1 to close the section the arrow doesn’t change back. How do you fix that?
  • Roshan wrote on 28 August, 2008, 5:15

    @Bryson – Thanks for mentioning the bug, Let me fix that post that soon…
  • Dude wrote on 2 September, 2008, 20:48

    I want to be able to add pictures and tables within each accordion rather than tages

    When i simply put text its getting left.png file to show on top of the text why ?

    can you please show me a sample of adding normal text instead of li inside the accordion

    thanks mate
  • Sarah wrote on 4 September, 2008, 18:07

    For the rollover version of the menu how do you change the code so that when the user moves the mouse off the menu collapses? I’d like to have all menus closed unless the user is hovering over one item.
  • jon wrote on 8 September, 2008, 21:14

    really you are better off using toggle or hover and leaving the accordion list with the arrow in original position. first click get’s down arrow second click returns to left arrow and similar idea for hover functionality

    $(“#firstpane p.menu_head”).toggle(
    function()
    {
    $(this).css({backgroundImage:”url(down.png)”}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(this).siblings().css({backgroundImage:”url(left.png)”});
    }, function()
    {
    $(this).css({backgroundImage:”url(left.png)”}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(this).siblings().css({backgroundImage:”url(left.png)”});
    });
    });
  • jeremy wrote on 16 September, 2008, 5:19

    That’s nice work, but won’t display:none (or hidden) affect accessibility?

    In other words, people viewing the menu on a user agent without javascripting or with javascript turned off won’t be able to get to the delicious treats inside the menu… How could that best be fixed?
  • Roshan wrote on 16 September, 2008, 5:58

    @jeremy – if JavaScript is turned off then this menu don’t work at all and you can handle the disabled JavaScript in the following way

    roshanbh.com.np/2008/04/how-to-know-handle-disabled-javascript.html
  • Antonio wrote on 16 September, 2008, 18:35

    Hello Roshan.
    I am a Spanish boy and speak badly the English language.
    My question is:
    Since it is possible to apply to the menu an effect of fadein and fadeout?

    Thank you very much.
  • Roshan wrote on 16 September, 2008, 19:25

    @Antonio – yes you can use fadeIn and fadeOut function in the place where I’ve used slidetoggle and slideup function….
  • Jason wrote on 18 September, 2008, 15:51

    Roshan, I can’t wait to use this. But of course I need a little assistance. I’m running wordpress 2.6 and I would like to use this script in a “text” widget in my sidebar for the blogroll. I understand the html and css parts, but I can’t figure out how to make the widget look for the script. I tried placing it in the header.php and tried it in the sidbar.php but it still didn’t work. Any ideas? Thanks.
  • Roshan wrote on 18 September, 2008, 16:42

    @Jason – put the javascript code and jquery library in header.php and css in css file and then put the html file in text widget……I think it should work in that way……
  • Jason wrote on 19 September, 2008, 14:38

    Roshan, thanks for getting back to me. I’ve tried what you said to do and what happens is, is that the javascript shows up as plain text above my header. Any ideas? Thanks.

    Jason
  • David wrote on 19 September, 2008, 15:18

    Hi

    I am trying to get the first pane to be open when you first visit the site. I have read the comments about how you can do this, but I still cant get it to work, where exactly do you put the code for this to happen within the following code:

    $(document).ready(function()
    {

    {
    //slides the element with class “menu_body” when paragraph with class “menu_head” is clicked
    $(“#firstpane p.menu_head”).click(function()

    {
    $(this).css({backgroundImage:”url(images/slider-top-close.jpg)”}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(this).siblings().css({backgroundImage:”url(images/slider-top-open.jpg)”});
    });
    //slides the element with class “menu_body” when mouse is over the paragraph
    $(“#secondpane p.menu_head”).mouseover(function()
    {
    $(this).css({backgroundImage:”url(images/slider-top-close.jpg)”}).next(“div.menu_body”).slideDown(500).siblings(“div.menu_body”).slideUp(“slow”);
    $(this).siblings().css({backgroundImage:”url(images/slider-top-open.jpg)”});

    });

    });

    Thanks!
  • iamowe wrote on 1 October, 2008, 22:07

    David…. look at tristen’s post above from August 14th, 2008 3:05 am …. just tell it to show the number 0 ( first ) div.

    MY QUESTION: Can you open/close a menu item by a link/querystring? I know you can append a javascript command/function to a link, but can’t figure it out in this case.

    Anyone tried this? THANKS!
  • jon wrote on 2 October, 2008, 19:05

    Is there a way to expand and collapse all at once?
  • Gene wrote on 7 October, 2008, 18:13

    I’m using a lot of images and tabled data inside these accordions. Looks great in FF and Safari, but really falls apart in IE7. In most cases the prior menu item only closes part way when the next one is clicked and closed panes often times overlap open ones. Any thoughts?
  • osu wrote on 11 October, 2008, 14:39

    Hi Roshan,

    Lovely work. How would I apply this to an unordered list? Would it just involve applying something like this:

    [ul id="firstpane" class="menu_list"]
    [li class="menu_head"]Header-1[/li]
    [div class="menu_body"]
    [a href="#"]Link-1[/a]
    [/div]
    [li class="menu_head"]Header-2[/li]
    [div class="menu_body"]
    [a href="#"]Link-1[/a]
    [/div]
    [/ul]

    Thanks
  • jon wrote on 13 October, 2008, 19:53

    Is there a way to open all menu items at the same time? and a way to close all of them at the same time? please, any help would be greatly appreciated.
  • pradeep wrote on 24 October, 2008, 18:35

    hi
    this is nice plugin for menu
    i have used this for my site
    but i m getting some problem. when i use this a yellow icon is appear on status bar.
    and i m getting error message(object do’nt support)
    how can remove this

    thanks
    pradeep jain
  • ken williams wrote on 19 November, 2008, 6:36

    when clicking a row, it expands and the arrow points down as normal. when I click the same row it contacts which is fine, but the arrow still points down and does not change back to left.

    any way to fix this cosmetic glitch?
  • chitgoks wrote on 24 November, 2008, 3:22

    could you provide additional code that will produce menus with submenus? thanks
  • Nathan wrote on 24 November, 2008, 8:22

    Thanks mate… this was exactly what I needed. Cheers! Good work!
  • chitgoks wrote on 25 November, 2008, 8:52

    i used the same css properties that you have + images, except that i changed the code to cater to sub-menus.

    here’s the link in case anyone is interested

    http://tech.chitgoks.com/2008/11/25/create-accordion-menu-using-jquery/
  • Roshan wrote on 3 December, 2008, 5:50

    @chitgoks – thanks for sharing that…
  • Panos wrote on 4 December, 2008, 10:11

    Is there a way to change the header image according to menu state?

    What I mean is that when I click the same menu I opened before but this time to close it (I don’t want to click another menu to close it), the correct image to show is left.png. Instead now when you click a menu whether it’s closed or opened there’s always the down.png image shown.
  • bruce wrote on 12 December, 2008, 0:11

    the issue i have is that i want to build my side nav with this, with only SOME of the side nav elements expanding. for example,

    ABOUT US
    CONTACT US
    EQUIPMENT 1
    first equipment 1
    second equipment 1
    third equipment 1
    EQUIPMENT 2
    first equipment 2
    second equipment 2
    third equipment 2
    TESTIMONIALS
    PHOTO GALLERY

    i can’t figure out how to close all of the expanded submenus when someone mouses over one of the side nav items that has no children (i.e., any of the non-’EQUIPMENT…’ ones).

    what i’ve got so far can be seen at my site.

    any help would be most appreciate!!!

    thanks,
    bruce
  • bruce wrote on 12 December, 2008, 16:14

    i found a solution to my problem by reading though some of your other tutorials. i’ve posted it at http://www.5happy.com/misc/accordian.

    my only issue now is slow loading of the icons in internet explorer on a pc… but i haven’t preloaded the images or tried fixing it yet… i’ll post my findings if and when!

    thanks again for the cool implementation and tutorial.

    bruce
  • Rajabasha wrote on 12 December, 2008, 16:51

    HI
    Thank you very much Roshan, How can I get three stages of a menu header, actually I am using images for menus i.e.. by default 1.png, onrollover: 2.png & onClick:3.png
  • mobilya wrote on 14 December, 2008, 11:10

    Nice tutorial… thank you
  • Web Agentur wrote on 15 December, 2008, 8:52

    Thank you … this tutorial has me very helped.
  • Mark wrote on 18 December, 2008, 15:13

    I need to set the maximum size of the menu and have the sub items start scrolling if there are more than 5.

    Please help

    Thanks
  • Abs wrote on 21 December, 2008, 23:18

    Hi Roshan

    I’m using your code as an include file for the menu navigation on my site. If I am using it as an include, is there anyway I can leave a certain selection open instead of having option 1 open all the time, bearing in mind this code/menu is coming from an external file.

    Many thanks

    Abs
  • bruce wrote on 22 December, 2008, 22:23

    abs – why not use php, asp, cfm, etc. to pass a session variable back and forth between pages, with the appropriate number of the item you want open on that page?
  • Abs wrote on 22 December, 2008, 22:37

    Thanks Bruce,

    I’m using php, so I’ll do a little bit of reading on session variables and how they work.
  • Abs wrote on 23 December, 2008, 23:04

    Hi again,

    Im passing a session variable called menu_id through my pages, which contains a value from 0 to 6 – depending on what page I am on. I am doing this via php, but how do I convert/use the php value in my jquery script.

    As far as I can tell, I just need to change this line to accept the session variable – $(“.menu_body:eq(0)”).show();

    Many Thanks
  • bruce wrote on 25 December, 2008, 1:44

    try something like this:

    $(”.menu_body:eq(0)”).show();

    session_start picks up an existing session.

    anything within the php open and close tags… if syntactically correct… will be rendered when the page loads… i.e., before the javascript. i use this trick all the time… for dynamic shopping cart images that also show how many items are in the shopping cart, for dynamic slide shows, etc.

    give it a shot, let us know.

    bruce
  • bruce wrote on 25 December, 2008, 1:47

    oops… that stripped out the php code… here it is again, but replace the pipe characters with less_than and greater_than characters:

    |?php session_start(); echo $_SESSION['menu_id']; ?|

    if that doesn’t appear correctly or work, feel free to email me directly: blinde@5happy.com
  • Abs wrote on 25 December, 2008, 10:38

    Thanks Bruce,

    I’ve solved it using the following commands…..don’t know if it is ‘correct’ but it seems t work.

    var menu_id = “[?php echo $_SESSION['menu_id'] ?]”; //to grab the php session in a javascript variable.

    $(“.menu_body:eq(” + menu_id + “)”).show(); //im sure you can use the session directly in here but no matter what I tried I couldn’t get it to work. This method does work

    Thanks

    Abs
  • anonymous wrote on 5 January, 2009, 8:56

    please help how to correct the js..
    problem is when i pass my mouse quickly on the menu the dansing effect is repeatedly and once 1 remove my cursor out..the effects continues depending on the amount of time my cursor passed on the menu..
    i want once the mouse is out the menu closes to its initial state
  • Sean wrote on 9 January, 2009, 19:42

    Nice example, thanks! I made a minor modification though so that when you collapse a header it correctly shows the “left” image.

    var img;
    if ($(this).next(“div.menu_body”).is(‘:visible’)) {
    img = “url(left.png)”;
    } else {
    img = “url(down.png)”;
    }
    $(this).css({backgroundImage:img}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(this).siblings().css({backgroundImage:”url(left.png)”});
  • sergio wrote on 12 January, 2009, 16:44

    Excellent tuto ! How to set different colors for each button of the menu ?
    Thank’s for your reply
    Happy new year.

    Sergio
  • Ruwan wrote on 17 January, 2009, 10:00

    @Abs
    Hi I’m also interested in achieving the same result as your (ie trying to save the opened menu item to a cookie to reopen it one the visitor comes back to the same page)

    I know how to store data into a cookie but how can get a unique id for the menu item that was clicked? so that i can reopen that menu item using the $(’.menu_body:eq(0)’).show(); function.

    btw its a very helpful code Roshan
  • Paul wrote on 26 January, 2009, 4:13

    On my page I have 2 div tags.

    Div tag #1 is populated by choices from the accordian menu.
    Div tag #2 contains the menu.

    E.g. Clicking Link #1, from the first pane, in the menu causes a description on pine trees to appear in div tag #1.

    If I were to click on a link in the pine trees description, it would then reload the menu into div tag #2, with the first pane closed and the second pane open. The links showing in the second pane are now relevant to the pine trees description in div tag #1.

    I know how to set which pane I want opened and I can call my links dynamically. Where I’m having problems is that when the menu reloads in div tag#2, the javascript and jquery stop working.

    I’ve researched binding and the livequery plug in, but in short, I can’t get them to work.

    Any suggestions would be appreciated.
  • Finn wrote on 18 February, 2009, 3:57

    Wow, this menu is great, best one I’ve seen so far, thanks a lot for this I’m going to use it on my site.
  • Clive wrote on 5 March, 2009, 14:46

    What licence is your JavaScript released under? I would prefer LGPL
  • matt wrote on 9 March, 2009, 17:22

    @Jeremy/Roshan

    Display:none (or hidden) will affect accessibility when used in the HTML. Users will not be able to see the information contained in the divs. So, instead of hiding the div in the css, it is probably better to do it in the javascript.

    For example:

    //Place this at the beginning of the accordion function right below the .ready(function($)
    $(“div.project_body”).hide();

    Then remove the .project_body {display:none;} from your css.

    This way, if javascript is enabled, then the accordion panels will be hidden and the accordion should function as normal. But if it is disabled, the content will still show as it degrades nicely…
  • Amit wrote on 13 March, 2009, 16:32

    Hey Roshan

    Many thanks for the code.
    I’ve been looking for somthing like that for quite a while.

    keep up the good work ;-)

    All the best
    Amit
  • sergio wrote on 13 March, 2009, 21:29

    Hi Roshan.

    Congratulations and THANKS for your Blog.

    My English is very poor, but I’ll try explain my problem.

    I load this script in my blog, and working very well when I’m using Chrome, BUT Isn’t work when I use Internet explorer.

    Do you know what is happening?

    Thanks a lot an best regards.
  • BassKozz wrote on 16 April, 2009, 3:14

    Hello Roshan,

    Were you able to find a solution to the problem Bryson posted back in August:

    #Bryson Justus wrote on 27 August, 2008, 19:47
    >If you click on Header-1 to open a section then click Header-1 to close the section the arrow doesn’t change back. How do you fix that?
    #Roshan wrote on 28 August, 2008, 5:15
    >@Bryson – Thanks for mentioning the bug, Let me fix that post that soon…

    I would also like to know how to fix this problem.
  • BassKozz wrote on 16 April, 2009, 20:39

    Roshan,

    I’ve got another one for ya… I am trying to get the menu_head font to change as well as it’s background color (I removed the image as I don’t need it for what I am building, but I can’t seem to get it to work. I’ve tried the following:
    $(this).css({background:”#FF0000″;font-color:”#FFFFFF”;}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);

    Any idea’s on how to change 2 css attributes at the same time from that script?

    Also for some odd reason I am getting a weird firebug error when using this script:
    [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///usr/lib/firefox-3.0.8/components/nsSessionStore.js :: sss_saveState :: line 1909" data: no]
    [Break on this error] this._writeFile(this._sessionFile, oState.toSource());
    nsSessionStore.js (line 1909)

    Any idea’s?

    Thanks for the great work,
    -BassKozz
  • Matthew Coleman wrote on 17 April, 2009, 19:26

    @BossKazz

    First of all, text-color: is not a property, it should just be color:

    Also I think it should be a comma instead of semi-colon in between the two css properties.
    ({background:”#FF0000?, font-color:”#FFFFFF”;})
  • BassKozz wrote on 18 April, 2009, 18:38

    @Matthew Coleman, Thanks man, comma did the trick :-D

  • nathan wrote on 19 April, 2009, 0:09

    can you please explain how i might alter this to collapse the accordion onmouseout? so, when the mouse isn’t in either the menu_head or menu_body field, the menu would retract. thank you so much!
  • Clive wrote on 20 April, 2009, 7:30

    Is it possible to make the menu save the section that is opened out to a cookie so that when the control is reloaded, it can re-open the same section?
  • Michelle wrote on 27 April, 2009, 21:53

    I love this, but having issues. If I have the HTML already my page then the headers expand and collapse. How I want to use it is to have the Headers, etc generated dynamically thorugh code. I have a SQL query which is select some records and then shoving info into variables and setting it up to look like the html for the accordian menu. It gets on the page, but nothing happens when I click on the headers. The script is on my page. Do I need to reregister the script that is calling the functions in jquery.js. Any assistance woul de appreciated.

    Thanks
    M
  • Rod wrote on 30 April, 2009, 16:03

    Thanks for this script !

    I am using the version that collapses on rollover, however, I want to make the 1st heading clickable and insert a link to it, because it has not subsections…can anybody guide me on what to modify to achieve this?

    Many thanks in advance
  • Chris wrote on 5 May, 2009, 20:59

    Thanks so much for this – exactly what I was looking for and very elegantly done.
  • redsonic wrote on 21 May, 2009, 20:54

    @Roshan thanks for this great menu
    @Omar
    I found a solution to keep a control on the menu so that when you follow a link the menu stays open, quickly this is what I did:

    On the page that will be opened by the first link I put something like this :

    On the jquery function I added this lines (at the beginning) :
    var num=$(“span.keep_open”).attr(“id”);
    $(‘.menu_body:eq(‘ + num + ‘)’).show();

    That is all.

    For the page that will be opened by the second link, I have written :

    etc …
    No ajax, no pain!
  • redsonic wrote on 21 May, 2009, 20:58

    the two missing lines (I don’t know why they don’t appear)
    *span class=”keep_open” id=”0″> </span*

    Hope it works now.
  • greenchili wrote on 28 May, 2009, 18:32

    I love this menu – it’s great! One question – I need to make the Header-1, Header-2 and Header-3 clickable links. I tried to add a style to the css, but when I apply the new link style to them, they don’t function to open the accordians. Any suggestions?
  • ben wrote on 5 June, 2009, 2:35

    good!

    from china guangzhou
  • Webagentur wrote on 6 June, 2009, 11:03

    Thank you … this tutorial to menu has me very helped.
  • jane wrote on 10 June, 2009, 8:21

    good one
  • Ben McOsker wrote on 10 June, 2009, 18:47

    I am trying to get the navigation working so that the accordian is open when a user is in that directory. I am using a $_SERVER['REQUEST_URI']; call in PHP and parsing the array to give me a directory,.

    I am new to jQuery… where would I add the $(”.menu_body:eq(” + menu_id + “)”).show(); ?
    Do I add this after the .ready(function($)?

    Are there any changes to jQuery.js?

    Best,
    Ben McOsker
  • jayesh wrote on 18 June, 2009, 11:06

    Works perfectly fine! So simple that I could also tweak it.. :)

  • ZK@Web Marketing Blog wrote on 20 June, 2009, 17:39

    If I were to have to train a new developer how to do web work, I would head straight to JQuery. I would use JQuery as a JavaScript learning gateway drug. By the time the developer is done learning JQuery, then learning the rest of JavaScript would be much easier. Plus, they are already effective at producing code. I see that as a double bonus.
  • Alex W wrote on 29 June, 2009, 20:26

    Great script!!

    I’m currently trying to make a way for the menu to collapse when the user mouse’s out. This command does that:
    $(“#secondpane p.menu_head”).mouseout( function() {
    $(this).css({backgroundImage:”url(left.png)”}).siblings(“div.menu_body”).slideUp(“slow”);
    });

    The problem I am having is keeping the menu open when you want to hover over a link. Anyone have any ideas? Thanks in advance for any replies.
  • Tim Roberts wrote on 10 July, 2009, 20:25

    Roshan, thanks for this great tutorial.

    Can anyone tell me how to make this menu expand from the bottom up instead of from the top down? Much obliged.

    Tim
  • Chris wrote on 23 July, 2009, 19:02

    Is there a way to change the header image according to menu state?

    What I mean is that when I click the same menu I opened before but this time to close it (I don’t want to click another menu to close it), the correct image to show is left.png. Instead now when you click a menu whether it’s closed or opened there’s always the down.png image shown.
  • REEVESTRIFE wrote on 5 August, 2009, 11:36

    oooooh… all the aspx is filtered out… but i can mail it if requested
  • kristianDavid wrote on 24 August, 2009, 15:39

    first off, love this menu! thanks a lot for providing it.

    secondly, how do i make the header a link itself? in my navigation, the headers are pages as well that i need to link to.

    thanks in advance.
  • Leonardo wrote on 2 September, 2009, 17:48

    Roshan, first of all thank you a lot for the tutorial, it is great! Then, I would like to know something that I will be grateful if you could help me with. It is rather easy I think. I want to change the arrow from down to left when I click on an opened header. Right now the down arrow stays shown. Thanks in advance.
  • Ambrish wrote on 16 September, 2009, 1:23

    thats a superb piece of code..
    But what if i want a widget instead of accordion.
    What changes do i need to make…
  • Chris wrote on 17 September, 2009, 19:29

    Hi Roshan,

    I have the same question as kristianDavid, how do you make the header for the different section links aswell?

    Thanks
  • chris wrote on 24 September, 2009, 16:06

    How do you fire another jquery event, by clicking on a link, inside the accordion? Say i wanted a link that would pop up a dialog. Im new to jquery, so this would be a big help. I cant find something that does this, anywhere.

    Thanks for the great tutorial
  • Moderne Ausbildung wrote on 2 October, 2009, 9:37

    Great! And helpful! Thanks!
  • ravi wrote on 3 October, 2009, 16:34

    Thanks steve
  • thepadi wrote on 11 October, 2009, 13:55

    I like this menu.

    Thanks Roshan.
  • Steve wrote on 12 October, 2009, 17:17

    This script is great
    @redsonic
    Wil you tell me, how you exactly do that?
    Because I`ve tried everithing possible, but nothing happend.
    If you want, you may send me the script at my mai.
  • ersin wrote on 25 October, 2009, 23:51

    very helpful.. thank you.
  • Marcelo wrote on 9 November, 2009, 20:40

    Hi, this is a wonderful script!
    But wait, what if I want not to show the arrows in menu headers that hasn’t children? is that possible? I’ve tried and turned me mad :)

  • Wes wrote on 19 November, 2009, 19:51

    I wrote a nice little tutorial with a custom accordion specifically for wordpress vertical accordion menu. It can be found here http://www.wessray.com/jquery/jquery-accordion-for-wordpress/
  • educational consultants chennai wrote on 4 December, 2009, 13:44

    Great Tutorial. Thanks
  • Bockerl wrote on 8 December, 2009, 20:23

    Thanks, this JQUERY-Tutorial has me very helped.
  • Travis Berry wrote on 11 December, 2009, 21:16

    @jeremy I found a solution to the accessibility problem. Use a tag and inside put a link to a nojavascript.css file. In the css file, add this
    .menu_body {
    display:inline !important;
    }
    This will make the navigation visible to those without javascript.
  • Travis Berry wrote on 11 December, 2009, 21:18

    Sorry, comments stripped my tag, use a noscript tag and put the css link in that.
  • Shiva wrote on 13 December, 2009, 18:12

    Hello, in IE 8, playing with the accordion causes the margins in between the headers to dissapear. Has anyone came across a fix for this?

    Thanks,
    Shiva
  • webdev wrote on 24 December, 2009, 18:11

    How can a person update a jQuery menu from a central file (like XML for example) if the html DIV structure must be pasted from page to page? How to you update the menu if you have, for example 50 pages, without having to go page by page and not being able to use Server Side includes?
  • free style wrote on 25 December, 2009, 3:40

    very useful!
    ths
  • wespai wrote on 28 December, 2009, 6:11

    thx collect it to
    ajax.wespai.com
  • Jonathan wrote on 2 January, 2010, 23:35

    Hi guys,

    First of all, thank you Roshan for this script! But I realy need your or somebody’s else help. I’m making a website (wich is not ready yet), and I’m stuck with the open menu on load page thing, where you have to add this code:

    $j(’.menu_body:eq(0)’).show();

    See my website: http://www.loft238.nl/DGR/index.html

    I did that for the index page just to see if it works, and I tried almost everything.. I got a deadline in 5 days so I hope somebody of you can give me a solution.

    Many thanks in advance!

    Jonathan
  • ink cartridges wrote on 13 January, 2010, 14:31

    Thank you for a great script. We are planning to implement this on our website.
  • michel wrote on 14 January, 2010, 13:28

    Hello,

    this menu is very good tool. For IE, FF, Opera.
    BUT, not on Safari (windows and mac) : impossible to open the menu if configurated on “clicking” and when completely closed.
    Do you have a solution ?
  • vad wrote on 17 January, 2010, 10:56

    Hi Roshan,
    Great script! I use it for my friend’s site.
    I faced a minor trouble at Mozila only – can’t customize hover color of head links by editing css. it works ok with body links, but doesn’t with head ones.
    I managed to solve that with adding onmouseover=\”javascript:this.style.color=’#FFFF99′\” onmouseout=\”javascript:this.style.color=’#FFFFFF’\” (php notation). Is it somehow assosiated with vs at original menu items section?
    Thanks
  • michel wrote on 19 January, 2010, 7:12

    « BUT, not on Safari (windows and mac) : impossible to open the menu if configurated on “clicking” and when completely closed. »
    Sorry for disturbing : all is OK now. The menu works perfectly, in Safari too !
  • Web Development Company wrote on 3 February, 2010, 9:21

    Simply excellent , it helps a lot while programming with Jquery. i got the learning Jquery e-books from some rapid sites, there are really very invaluable info on this language. . . . .Thanks for sharing
  • Praveen wrote on 3 February, 2010, 11:51

    Hi,
    Thanks for the script. It works. What should i do to make first menu expand by default?

    Please help !
  • Rakshit wrote on 5 February, 2010, 17:45

    Hi,

    Very well Explained. Its working. Thanks bro. Looking forward to new posts on menu styles.

    Thanks,
    Rakshit.
  • Rakshit wrote on 5 February, 2010, 17:54

    Hello Praveen,

    If you would like to open first menu open than you have to write style=”display:block;” sentence in First Div in HTML.

    This will overwrite the CSS style of class display:none for first div.

    Once you will add inline style in first div, it will be visible when page loads.

    Thanks.
  • stephen wrote on 11 February, 2010, 7:32

    Dear Roshan,

    Thank you for your great effort, it is very helpful to do our things easy.

    Could you guide me to edit the code for mouse over accordion to collapse if I move the mouse out of the menu.

    Thank you and looking forward.

    Stephen
  • kamran wrote on 16 February, 2010, 3:00

    i think we should change second command from :
    $(this).siblings().css({backgroundImage:”url(images/newsGroup_hdr.png)”});

    to this:
    $(this).siblings(“menu_head”).css({backgroundImage:”url(images/newsGroup_hdr.png)”});
  • nayeem@vicoast wrote on 25 February, 2010, 12:44

    The script is very good. But it has a problem. let me take u to scenario. U have clicked over a menu, it shows u all the sub menus. Now when u click over a menu which is not having any sub menu then when the opened menu regain its size but the line separating the menus get merge at one place. Can u please tell how can come over this problem.
    Thanks in advance.
    NayeemKhan
  • okmat wrote on 25 February, 2010, 20:21

    Thanks! this is exactly what I was looking for.
    A small contribution to this code: you can add a toggle function and an ID to the element to manually collapse a specific menu, for example with a button. This not only allows for more control but also provides a way to expand a specific menu acording to the current page and even generating a java script with PHP…

    Add this inside the section:
    function toggle(pID){
    $(document.getElementById(pID)).css({backgroundImage:”url(down.png)”}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(document.getElementById(pID)).siblings().css({backgroundImage:”url(left.png)”});
    }

    And ad an ID to the tag
    Header-1

    And a button to collapse the menu manually

    Cheers!
  • Beben wrote on 13 March, 2010, 15:15

    thank you ^^
  • Disain wrote on 18 March, 2010, 9:54

    excellent information, thank you thanks for the inspiration!
  • ajay wrote on 24 March, 2010, 10:28

    hi Roshan
    i am using accordian menu in my site when page is reloaded it is active parant menu is closed
    i want to one link open at a time
  • Tim wrote on 25 March, 2010, 19:10

    Hey, I am a complete rookie at jquery and I need some help. I have implemented the script and it is working great, but I am wondering if you can combined the two different menu styles. I would like to click to open the menu but I want it to close on two different scenarios…rollout/rolloff of menu and when you click on any of the menu_body links. Can anyone help me out?
  • chris wrote on 28 March, 2010, 18:50

    hey guys,

    my problem is the same as a couple others, i am trying to keep the menu open when the user clicks to a sub page. I am looking to keep the menu open on the sub pages so the user doesn’t have to re click the menu each time a new pages reloads. Redsonic posted some code way above in the comments, but i really don’t know how to implement it. Can someone help?
  • kaviku wrote on 13 April, 2010, 1:35

    Thank for script.
    It’s very good.I need it.
    But I want to it work with PHP.
    So,to create a menu for category.
    My old file “listcategories.php”:
    Link: http://www.mediafire.com/?zvd5ylltyqg

    Now I want to create a menu with links from database with fields as in that php file.
    Help me.
    Thank you very much.

Trackbacks

  1. links for 2008-06-02 | Mior Muhammad Zaki
  2. How to make accordion menu using jquery
  3. Katod’un Seyir Defteri - 02.06.2008 at katodivaihe
  4. The Abarentos Narrative » links for 2008-06-04
  5. Fatih Hayrio?lu'nun not defteri » 09 Haziran 2008 web’den seçme haberler » Html, nas?l, kodlan?r, Ba?lant?, Sitelerde, çok, kullan?yoruz, Buda, baz?, yava?lamalar
  6. Help me to become the first Blogging Idol
  7. 300+ Jquery, CSS, MooTools and JS navigation menus | PaulSpoerry.com
  8. 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner
  9. 300+ Jquery, CSS, MooTools and JS navigation menus | Neurosoftware web dev
  10. Create Accordion Menu Using JQuery | Tech Tips Tricks
  11. 13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox
  12. 13 Excellent Tutorials On Creating jQuery Navigation Menu | Pedram Development
  13. WebAir Blog » Blog Archive » 17 “Must see” Menu in jQuery
  14. 8 Amazing jQuery Accordions
  15. 8 “Accordéons” JQuery
  16.   8 “Accordéons” JQuery | In-my-head
  17. 13 ?????? ?? ???????? ????????? ?? Jquery | Help For Web Developers
  18. idea’s blog - [?]300+Jquery, CSS, MooTools ? JS?????
  19. Accordion menu by Roshan - Okada Design Blog
  20. 300+Jquery, CSS, MooTools ? JS??????? | ?????
  21. 300+ Jquery, CSS, MooTools and JS navigation menus « Dogfeeds——IT Telescope
  22. 30+ Essential Javascript Framework Supported Navigation Techniques | tripwire magazine
  23. Collection of Essential Javascript Framework Supported Navigation Techniques | guidesigner.net
  24. Menu và Tab các ki?u - Mr[K]id – Lê Quang ??c
  25. 20?Javascript??????? » ?????
  26. Accordion – Plugins, Demos and Tutorials - Hidden Pixels
  27. 42 jQuery Navigation based Techniques | Codrops
  28. 13 Excellent Tutorials On Creating jQuery Navigation Menu | DevWebPro
  29. jQuery Navigation Menus: A look at 13 Tutorials « Web Design
  30. Gotowe skrypty jquery, mootools « Sebastian Sobieraj
  31. 30 Useful Tutorial for JavaScript Framework Navigation | Tutorials | instantShift
  32. 13 Excellent Tutorials On Creating jQuery Navigation Menu « Nulls
  33. Amazing jQuery Accordions « anil's Blog
  34. Accordion Menu Using jQuery
  35. 40 Really Useful JavaScript Tutorials with Modren Techniques | Smashing Buzz
  36. 40 Really Useful JavaScript Tutorials with Modren Techniques | crazyegg.net
  37. Inline Expansion – Why And Where To Use It | Spyre Studios
  38. 33 jQuery Menü | SyncapNoktaOrg
  39. Excellent jQuery Navigation Menu Tutorials - Noupe
  40. 13 Excellent Tutorials On Creating jQuery Navigation Menu | Everything of KK
  41. 30 jQuery Accordion Menus, Tutorials And Best Examples
  42. 30 jQuery Accordion Menus, Tutorials And Best Examples » abdie.web.id
  43. 300+ Jquery, CSS, MooTools and JS navigation menus
  44. 30 jQuery Accordion Menus, Tutorials And Best Examples « Websitetutorials’s Blog
  45. 15+ Amazing jQuery Navigation Menu Tutorials
  46. 37 Amazing Tutorials for jQuery Navigation Menus
  47. 13 Excellent Tutorials On Creating jQuery Navigation Menu « WORLD OF RADZAD
  48. Easy slide down menu
  49. 300??Jquery, CSS, MooTools ? JS ???? | ????
  50. 33 jQuery tutorials to create Navigation Menu
«
»
Copyright © 2012 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.