How to Create Accordion Menu (CSS3+jQuery)

How to Create a Accordion Menu (jQuery Version) [Tutorial]

Topic: jQuery / CSS3
Difficulty: Intermediate
Estimated Completion Time: 30 mins

As you may noticed a few days ago we released a tutorial about How to Create an Accordion Menu in Pure CSS3. As this pure CSS3 Accordion Menu will not work on all browsers because the :target selector in not supported in the oldest browsers we decided to create a jQuery version of this menu. Also jQuery offers more stability and cross browser compatibility support so if you want to provide to your visitors/client a better product you may consider use this jQuery version.

Before you start reading this tutorial I recommend you to read the CSS3 Version as we will not cover all the steps and will focus only on the changes that need to be done for the jQuery version.

Step 1 – HTML Markup

The HTML is the same as the CSS3 version, a nested unordered list which will contain all of our links. We have added a class to each one to be able to add the images and the id is needed for the CSS3 only version. We will keep the CSS3 only version working so if the JavaScript will be disabled on the client browser it will continue working with just CSS.

<ul class="accordion">

	<li id="one" class="files">

		<a href="#one">My Files<span>10</span></a>

		<ul class="sub-menu">

			<li><a href="#"><em>01</em>Sub Menu<span>1</span></a></li>

		</ul>

	</li>

	<li id="two" class="mail">

		<a href="#two">Mail<span>20</span></a>

		<ul class="sub-menu">

			<li><a href="#"><em>01</em>Sub Menu<span>2</span></a></li>

		</ul>

	</li>

	<li id="three" class="cloud">

		<a href="#three">Cloud<span>30</span></a>

		<ul class="sub-menu">

			<li><a href="#"><em>01</em>Sub Menu<span>3</span></a></li>

		</ul>

	</li>

	<li id="four" class="sign">

		<a href="#four">Sign Out</a>

		<ul class="sub-menu">

			<li><a href="#"><em>01</em>Sub Menu</a></li>

		</ul>

	</li>

</ul>

Step 2 – CSS Styling

The changes in the CSS code are very basic. The only thing that we would do is changing and adding some lines of code.

In the next three parts of code the only think that we will do is adding some lines of code to add the “active” class. This class will be used in the jQuery code.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
	color: #3e5706;
	text-shadow: 1px 1px 1px rgba(255,255,255, .2);

	/*background: url(../img/active.png) repeat-x;*/
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}
.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
	color: #fdfdfd;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
	background: #3e5706;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

Now we will remove the previous styles (height, overflow, etc.) and we will use the “display: none;” property to hide the sub menus and the “display: block” property to show the sub menus.

.accordion li > .sub-menu {
	display: none;
}

.accordion li:target > .sub-menu {
	display: block;
}

Step 3 – jQuery

First we will link to jQuery library using the last version hosted by Google, if you want you can host it on your own server, it’s your choice. Next add the following code to the bottom of you HTML file just before the closing tag.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {

		// Store variables

		var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

		// Open the first tab on load

accordion_head.first().addClass('active').next().slideDown('normal');

		// Click function

		accordion_head.on('click', function(event) {

			// Disable header links

			event.preventDefault();

			// Show and hide the tabs on click

			if ($(this).attr('class') != 'active'){
				accordion_body.slideUp('normal');
				$(this).next().stop(true,true).slideToggle('normal');
				accordion_head.removeClass('active');
				$(this).addClass('active');
			}

		});

	});

</script>

We will start by storing this two variables. This will help to refer them and avoid to make jQuery jumping in the DOM to many times.

var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

This line of code will open the first accordion tab when the menu is loaded.

accordion_head.first().addClass('active').next().slideDown('normal');

Now we will disable the links of the accordion and only the sub menu links will be working.

event.preventDefault();

The next code will check if one of the accordion tabs is open and have the active class. So when you click on another tab it will remove and slide up the tab and add the active class and slide down the tab that you have clicked.

if ($(this).attr('class') != 'active'){
				accordion_body.slideUp('normal');
				$(this).next().stop(true,true).slideToggle('normal');
				accordion_head.removeClass('active');
				$(this).addClass('active');
			}

Conclusion

That’s it! I hope you have enjoy it and be useful for you. Don’t forget to let us know your feedback and subscribe.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

103 Comments
  1. steven Mar 1, 10:46 am

    Fantastic design, i just check the demo! this designs is so cool! and its looks so attractive in sidebar:) thanks for sharing css.

    Reply
    +2
  2. Free Astrology Zone Mar 1, 2:40 pm

    This is nice design menu,Look is very attractive,thanks for share the menu design

    Reply
    +6
  3. Nimsrules Mar 6, 3:12 pm

    Super sexy result. I’m gonna port this to a widget for blogger blogs. Thank you so much for sharing!

    Reply
    0
  4. Brad Mar 7, 3:53 am

    Great tutorial! This would be very useful for a responsive website design for a mobile menu I think!

    Reply
    +3
  5. Darrell Mar 12, 9:47 am

    How would I target a certain menu to open on load, other than first or last item? Thanks in advance

    Reply
    +3
  6. Aditi Mar 18, 6:15 am

    Love this jquery menu, like to use it on my website.

    Reply
    +1
  7. Anatoly Mar 19, 7:38 pm

    Hey, how it possible to hide all the sub-menu and open it only by click, and then if you click again it will close

    Reply
    +4
  8. Caileen Mar 21, 8:57 am

    Amazing tutorial ! This helps a lot on my web design class. :)

    Reply
    +1
  9. Heidi Mar 26, 2:12 pm

    Hi.

    I changes from the pure css3 version of this menu because it jumped up if I pressed any buttons, and it worked great changing to the jQuery version. Now my question is if it´s possible to have all the links working when showing the sub menu (not just the links in the sub menu but the main link as well)?

    I tried removing event.preventDefault(); from the jQuery, but that makes the menu jump again..

    Reply
    +3
    • Valeriu Mar 26, 11:08 pm

      Remove this CSS code:

      .accordion li > .sub-menu {
      display: none;
      }

      .accordion li:target > .sub-menu {
      display: block;
      }

      It jumps because you have a “#” in the links, remove it and place a link.

      Reply
      +2
      • Heidi Mar 27, 12:43 pm

        Thank you for the reply.
        But this makes all the “tabs” open all the time. I need it to look and function like in the tutorial except I also need the dark “tabs” to function as links.

        Reply
        +1
        • Valeriu Mar 27, 3:38 pm

          Sorry, my mistake :D

          Remove the “#” from the links and add this CSS again:

          .accordion li > .sub-menu {
          display: none;
          }

          Reply
          +2
  10. tsorya Apr 8, 4:39 pm

    wonderful menu.
    I have aquestion pls .
    How i insert one more accordion inside this one. i menu -> sub_menu1 -> sub_menu2

    Reply
    +2
    • Valeriu Apr 12, 4:31 pm

      Ann other unordered list and you also need to create the jQuery script for the second submenu.

      Reply
      +1
  11. BooBoo Apr 12, 12:27 am

    Looks great, just doesn’t work as advertised. Regardless which link I go to, the first submenu displays. Any ideas? To be sure I had not messed up the code, I made 3 copies of your index page saving it with different names and put it into differing submenus. The first submenu always opens. AND I agree, the necessity of using TWEET is not great – I don’t tweet either so set up an account just for this and will probably never go to it again.

    Reply
    +1
    • Valeriu Apr 12, 4:35 pm

      It works as expected, you’re doing something wrong. The tweet is just a way for you to support us. If you don’t want to, just copy the source files from the live preview or do all the tutorial steps.

      Reply
      0
  12. Matthew Apr 15, 3:47 am

    Awesome snippet! Love it. Do you have any thoughts on a user friendly solution which would allow the parent menu items to be an active link as well as an action to open the sub menu. For example, first time the parent is clicked, then sub opens. The second time it is clicked the link href default is active. I’m yet to see a viable solution to this which is friendly.

    Reply
    0
    • Matthew Apr 15, 3:51 am

      Turns out this wasn’t too difficult… I just moved:

      event.preventDefault();

      to within the if statement:

      if ($(this).attr('class') != 'active'){

      Reply
      0
  13. TRex Apr 18, 6:10 pm

    great tutorial and resource. I have a question though. Everything is working fine, however, I have a piece of javascript that triggers a style for a menu when it is in a specific page.

    The class I use is current. Which mean when in a current page, the javascript triggers a different style.

    Now when I click on a sub-menu and go to the page related to that sub-menu, I want the main UL of that sub-menu to stay open and apply the active style to that sub-menu.

    I hope I made it clear enough.

    Would you be able to give some guidance in this regard?

    Thanks

    Reply
    0
  14. Dave Apr 19, 4:46 am

    Is there a way to get the same accordion_head to close again with another click? It would be nice to close an opened sub-menu with clicking it’s accordion_head and not opening another accordion_head. I am thinking of using this on a mobile site and it the opened accordion does not contain what the user is looking for it would be nice to close it to save real estate.

    Thank you for the great tutorial.

    Reply
    +2
  15. ali Apr 19, 9:49 am

    Hi,

    Thanks for the menu. It looks really nice.

    What about making it multi-level? I would like to have a multi level accordion, but I don’t have much experience in coding. I would appreciate you help. Thanks!

    Reply
    +1
  16. Kim Apr 20, 9:08 pm

    Not cool to force people to use Twitter in order to download. Make it available to all and even to people that does not want to use their Twitter account for other people’s business. Fail.

    Reply
    -1
  17. Omar Apr 21, 2:25 am

    how can you make multi-level accordions?

    sorry if its not the write place to ask first time on this site and love it

    Reply
    0
    • Valeriu May 15, 11:42 pm

      Create another unordered list inside of the one you want to add the third level, then style and create the click event.

      Reply
      0
  18. Rolf Kransse Apr 24, 11:36 am

    @Anatoly

    If you want the menu to close if you’ve clicked the active link:
    Put in this js code

    if ($(this).attr('class') == 'active'){
                                        accordion_body.slideUp('normal');
                                        
                                    }
    

    Just after event.preventdefault

    Reply
    -2
    • Rolf Kransse Apr 24, 11:38 am

      Btw, i really like this script! thx Valeriu!

      Reply
      0
    • hue May 19, 6:05 pm

      Just a quick note:
      If you are using more than one class in your links then use the following instead:

      if ($(this).hasClass(‘active’)) {

      Cheers – GREAT & SIMPLE MENU!

      Reply
      0
  19. Marcel van Est Apr 25, 6:56 pm

    Heelo,

    AWESOME!!!
    But i’m pretty new in Jqeury, and i have a question. When i make de submenu buttons linkable the page loads again. Then is want de the last opened submenu to be open! Not the first one.
    How can i do that?

    THX Grz Marcel

    Reply
    0
    • Marcel van Est Apr 25, 8:06 pm

      I solved it whit a peace of PHP. On a link i give a sub ( accordion2.php?sub=mail ), let PHP get the sub and echo it in Java.

      Java:
      accordion_head.eq().addClass(‘active’).next().slideDown(‘normal’);

      PHP:

      Reply
      0
  20. Marcel van Est Apr 25, 8:08 pm

    hmm seems to go wrong, my post:
    PHP:

    if(isset($_REQUEST[“sub”])){
    $sub = $_REQUEST[“sub”];
    }

    if($sub == “files”){
    $sub = 0;
    }elseif($sub == “mail”){
    $sub = 1;
    }
    elseif($sub == “cloud”){
    $sub = 2;
    }elseif($sub == “sign”){
    $sub = 3;
    }

    Java:
    accordion_head.eq().addClass(‘active’).next().slideDown(‘normal’);

    Reply
    0
  21. Marcel van Est Apr 25, 8:09 pm

    accordion_head.eq( echo $sub; ).addClass(‘active’).next().slideDown(‘normal’);

    Reply
    0
  22. Dhananjay Apr 26, 8:55 am

    I need one help

    how to make any required li active with sub menu opened manually

    Reply
    0
  23. Dhananjay Apr 26, 1:45 pm

    The hover and onclick active class does not render in IE8.

    Do you have any solution

    Reply
    0
  24. Aless Mc Apr 27, 5:31 pm

    Thanks alot for this menu ! I finally found what I was looking for for my website. Looks good and is easy to use.

    Reply
    0
  25. Aless Mc Apr 27, 5:54 pm

    Actually, I have a question. I wanted to make the header links clickable, so I removed the event.preventDefault(); code. However, when I click on the header link now, the sub menu doesnt appear…

    Does anybody have an idea of how to make the main menu links clickable AND the sub menus appear?

    Thanks in advance!

    Reply
    0
    • Valeriu May 15, 11:46 pm

      If it is not showing is because the jQuery script is not working, check for error on console.

      Reply
      0
  26. Brooks Apr 27, 8:12 pm

    Hey Valeriu and others,
    I agree, this menu is beautiful. I have customized its appearance to match my needs, but I am finding it difficult to customize the jQuery to the extent that I need. My question has already been more or less asked by tsorya:

    “How i insert one more accordion inside this one. i menu -> sub_menu1 -> sub_menu2″

    To which Valeriu replied:

    “Ann other unordered list and you also need to create the jQuery script for the second submenu.”

    The menu I have has five layers of sub-menus – and my script for the even the second submenu is buggy. Anyone have a solution for a menu of infinitely nested sub-sub-sub…menus?

    Thank you!

    Reply
    0
    • Valeriu May 15, 11:55 pm

      Basically what you have to do is that:

      Create another unordered list inside of the one you want to add another submenu.
      Then add a class to the parent ul.

      Ex:

      $(‘.parent-class > li’).on(‘click’, function() {
      $(this).child(). fadeToggle(‘slow’)
      ;});

      So when you click on the li the submenu will fade in and when you click it again it will hide.
      If you want to close the others that are opened you will have to use an if {} else {} like the one used on the script.

      Reply
      +2
  27. Batman May 4, 6:52 pm

    Is there any way that the sub-menu height can be limited and a scrollbar added if the contents exceed that height limitation?

    I cannot figure it out.

    Reply
    0
  28. terry May 10, 4:44 am

    wonderful . Thanks for the menu. It looks really nice.

    Reply
    0
  29. Shannon May 11, 11:44 pm

    What would need changed so that the inner ul and li could have an id value to have that section be expanded and highlight the inner li. Say DropBox had an id = “c23″. You pass in the url #c23 and it would open up My Files and hightlight DropBox?

    Reply
    0
  30. Leonie May 14, 11:42 pm

    I got the menu to work, I just can’t figure out how to change the colors in the right way. Can anyone help?

    Reply
    0
  31. Dabs May 21, 2:24 pm

    Nice, thanks. :) This was an awesome trying wrap my stuff around jquery…

    Reply
    0
  32. efi May 24, 4:32 pm

    I try this code to close the menu

    if ($(this).attr(‘class’) == ‘active’){
    accordion_body.slideUp(‘normal’);
    }

    but after we close we can’t open it again untill we click on other menu head..

    some can help with this?

    Reply
    +1
    • Valeriu May 27, 2:28 pm

      You need to slideup and also remove the active class.

      Reply
      0
    • Anjana Feb 5, 6:14 am

      Change the jquery to this :)

      if ($(this).attr(‘class’) != ‘active’){
      accordion_body.slideUp(‘normal’);
      $(this).next().stop(true,true).slideToggle(‘normal’);
      accordion_head.removeClass(‘active’);
      $(this).addClass(‘active’);
      } else {
      $(this).next().stop(true,true).slideToggle(‘normal’);
      accordion_head.removeClass(‘active’);
      }

      Reply
      0
  33. Tom May 24, 7:18 pm

    Very nice menu, I do have one question. I’m using the menu along with showing hiding panels I cannot seem to get the sub-menu link to stay in an active state after the user mouses off the sub-menu link. So if a user clicks on a sub menu item it would become a shade of grey and stay that way until the user clicks on another sub-menu link.

    Thanks

    Reply
    +1
  34. Nelson May 24, 10:54 pm

    Good tutorial, I was impressed.
    But when using it on a page with other content jquery does not work, do not open the menus, or clicking.

    In other content and use the 1.3.2/jquery.min.js 1.5.3/jquery-ui.min.js with this piece of javascript.

    $(document).ready(function(){
    $(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
    $(“#tabspanel”).hover(
    function() {
    $(“#featured”).tabs(“rotate”,0,true);
    },
    function() {
    $(“#featured”).tabs(“rotate”,5000,true);
    }
    );
    });

    Any suggestions to solve the problem …?
    He liked to use this menu …

    Reply
    0
  35. Todd May 26, 6:52 am

    Wonderful tutorial! Is there a way to click on the menu link after it is open to make the submenu close and slide back up?

    Reply
    0
  36. mspace Jun 12, 4:36 pm

    Hello
    Great menu!

    Do you know, I will keep the selected item opened? I mean if the user clicks on an link item and the page change the selected accordion to stay open.

    Thank you

    Reply
    0
    • Valeriu Jun 19, 3:52 am

      You can do it if you load your page in an iframe or you can save the current state of the accordion in a cookie or you can get the new page with ajax.

      Reply
      0
      • mspace Jun 20, 1:58 pm

        I actually work on aspx. I have a master page and I want to place the menu only one in that page and then the menu to stay open in the level which had been clicked. Do you know which is the right way to do it with ajax?

        thank you very much

        Reply
        0
  37. Harry Jun 14, 5:41 pm

    Hello
    I have the same question like “mspace”

    thank you

    Reply
    0
  38. Sri Vidhya Jun 21, 7:48 am

    I was searching for this skeleton html for a very long time since morning. God bless !! :) Thank you Valeriu Timbuc :)

    Reply
    0
  39. Ruiwei Jun 30, 3:36 am

    Very nice & tight menu. Many people may has same question as I do:
    1. Auto expend to current sub-menu;
    2. Disable “preventDefault()” for menu without sub-menu.

    Assign a class to “li” with sub-menu.

    Here is the modified HTML and JS:

    <a href="/" rel="nofollow">Home</a>
    <a href="#m-file" rel="nofollow">..(sub menu)
    
    
        $(document).ready(function () {
            var accordion_head = $('.accordion &gt; li.ws &gt; a'), accordion_body = $('.accordion li &gt; .sub-menu');
           //pageid from another page, ex: var pageid = 'm-file';
            if (pageid != '') {
                var listItem = $('#' + pageid);
                accordion_head.eq($('li.ws').index(listItem)).addClass('active').next().slideDown('normal');
            };
            accordion_head.on('click', function (event) {
                event.preventDefault();
                if ($(this).attr('class') == 'active') {
                    accordion_head.removeClass('active');
                    accordion_body.slideUp('normal');
                }
                else {
                    accordion_body.slideUp('normal');
                    $(this).next().stop(true, true).slideToggle('normal');
                    accordion_head.removeClass('active');
                    $(this).addClass('active');
                };
            });
        });</a>
    Reply
    0
  40. David Jul 3, 3:57 pm

    Thanks for this, works nicely.

    Would it be possible to make an list item in the accordian ul take you to a url if there is no sub-menu ul nested inside it? Perhaps specifying another class for those li with no sub-menu? I’m pretty new to all this stuff.

    Reply
    0
  41. Nick Jul 9, 3:58 pm

    Hallo,

    how i add this wonderfull menu in blogger?

    Reply
    0
  42. Todd Aug 7, 1:59 am

    This is a great design. Does anyone have a working example of a 3 level version of this navigation they can share?

    Reply
    0
  43. Nick Aug 25, 11:59 pm

    Found a small typo:

    “In the next three parts of code the only >>>>>>think<<<< that we will do is adding some lines of code to add the “active” class. This class will be used in the jQuery code."

    Reply
    0
  44. Kryss Sep 19, 1:24 am

    Great menu and great tutorial !

    Would it be difficult to change the color of the last clicked element (in sub-menu) ?

    Reply
    0
  45. John Sep 27, 11:45 pm

    Firefox works great, I don’t get animations in IE though…and it seems to jump down to the menu when clicking an item — though once you do so, clicking any other item doesn’t move the screen around. step up from the pure css script, but any ideas on my issue?

    Reply
    0
    • John Sep 28, 12:04 am

      thought it might be a good idea to tell you how im using the script.

      my menu is 4 main items, each has a couple paragraphs in it, so im not using a maze of menus. i dumbed it down a bit so im not using active states, etc. the menu has no color (goes on top of a background image)

      Reply
      0
  46. shogunR Oct 1, 5:41 pm

    How to put animation arrow in accordion?

    Reply
    0
  47. Larryhommes Oct 3, 4:41 pm

    Am lovely this menu but the problem i have is not display properly on IE8. How do i make it to work on IE8

    Reply
    0
  48. googs Oct 23, 8:42 pm

    i want to hyper link a menu that have no sub menu. please help me out

    Reply
    0
  49. Itacipri Dec 12, 5:11 am

    I want the “accordion_head” behavior change to only “toggle” and don’t “slide up” others. It’s possible ? Like this example: http://www.htmldrive.net/items/demo/1236/JQuery-Slide-accordion-Toggle
    Thanks !

    Reply
    0
  50. Marcy Feb 2, 8:57 pm

    Love the menu! Easy to install and customize. However, I cannot get it to work in IE7 or IE8. Not sure about IE9 as I am using Windows XP. In IE it will only show the links with bullets. No animations.

    Works the best in Chrome, but in FF the body will jump around when clicking on any of the accordian menu headers. You can view my website to see what I mean:

    http://www.springcreekrusticoutfitters.com

    I can see there are 2 other posts on here from folks who are experiencing the same issue as mine, but no one has yet to answer. Does anyone have any suggestions as to a fix for this? Please?

    Reply
    0
    • Marcy Feb 4, 6:10 am

      I’ve fixed the body jumping around issue (made some changes to width and height in the tables). But still can’t get IE7 or IE8 to show my webpage navigation correctly. I changed the doctype to: and it improved it (no more bullet lists! – but still not showing the button shading on the navigation headers).

      Here is the css portion of code:

      /* Left Navigation Column
      ———————————————– */

      .accordion,
      .accordion ul,
      .accordion li,
      .accordion a,
      .accordion span {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;

      }

      .accordion li {
      list-style: none;
      }

      .accordion li > a {
      display: block;
      position: relative;
      width: 150px;
      padding: 0 10px 0 10px;
      margin-left:auto;
      margin-right:auto;
      border-top: 1px solid #933901;
      border-left: 1px solid #933901;
      border-right: 1px solid #933901;
      border-bottom: 1px solid #933901;

      color: #ffffff;
      font: bold italic 12px/30px Arial, sans-serif;
      text-decoration: none;
      text-shadow: 0px 1px 0px rgba(0,0,0, .35);

      background: #933901;
      background: -moz-linear-gradient(top, #933901 5%, #351500 95%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#933901), color-stop(95%,#351500));
      background: -webkit-linear-gradient(top, #933901 5%,#351500 95%);
      background: -o-linear-gradient(top, #933901 5%,#351500 95%);
      background: -ms-linear-gradient(top, #933901 5%,#351500 95%);
      background: linear-gradient(top, #933901 5%,#351500 95%);

      -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
      -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
      box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
      }

      .sub-menu li a {
      color: #1D2F00;
      text-shadow: 1px 1px 0px rgba(255,255,255, .2);

      background: #ffffff;

      -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
      -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
      box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
      }

      .sub-menu li:last-child a { border: none; }

      .accordion > li:hover > a,
      .accordion > li:target > a,
      .accordion > li > a.active {
      color: #ffffff;
      text-shadow: 1px 1px 1px rgba(255,255,255, .2);

      background: #9BA45C;
      background: -moz-linear-gradient(top, #9BA45C 0%, #292B18 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9BA45C), color-stop(100%,#292B18));
      background: -webkit-linear-gradient(top, #9BA45C 0%,#292B18 100%);
      background: -o-linear-gradient(top, #9BA45C 0%,#292B18 100%);
      background: -ms-linear-gradient(top, #9BA45C 0%,#292B18 100%);
      background: linear-gradient(top, #9BA45C 0%,#292B18 100%);
      }

      .sub-menu li:hover a { background: #BFA778; }

      .accordion li > .sub-menu {
      display: none;
      }
      .accordion li:target > .sub-menu {
      display: block;
      }

      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      }

      .accordion li:target > .sub-menu {
      height: 100%;
      }

      If someone could help me figure this out, I’d really appreciate it!

      Marcy

      Reply
      +2
  51. Valeriu Feb 5, 9:31 pm

    Hello guys,

    When you implement this on your website and it doesn’t work properly first thing to do is check for errors http://validator.w3.org/ and fix them.

    For IE issues try adding the following line of code inside of the <head> tag.

    <meta http-equiv=”X-UA-Compatible” content=”IE=Edge;chrome=1″ />

    Reply
    0
    • Marcy Feb 5, 11:22 pm

      Thanks for your response Valeriu. I added the meta tag and that still didn’t correct the problem. Will email the header file where the css and html is located. Or if you’d rather, I can send you the ftp information to take a look at the actual files.

      Reply
      0
  52. Kostas Feb 21, 3:20 pm

    REALLY thank you for this menu….thank you

    Reply
    0
  53. nizil Feb 21, 6:57 pm

    Guys,

    Is there any way to open the second or third accordion tab when the menu is loaded. eg for first(accordion_head.first().addClass(‘active’).next().slideDown(‘normal’);).

    and after clicking the menu(no submenu), in the next page, is it possible to make the selected menu active

    Reply
    0
  54. Kiran Feb 26, 1:40 pm

    Item closes on double click..

    Help me to resolve it

    Thanks,
    Kiran

    Reply
    0
  55. Reini Mar 4, 8:14 pm

    Cool Menu!
    Is there a chance to save the active state at reload ???

    Please Help !

    Thanks Reini

    Reply
    0
  56. Thanigai Arasu Mar 20, 7:46 am

    How to customize this menu with options – expand/collapse all

    Reply
    0
  57. Guuz Apr 9, 9:11 am

    Is there a way that after clicking on one of the URL’s from the accordion menu that in the next page the same tab is opened unfolded which contains the URL?

    Reply
    +1
  58. Carlos May 9, 1:26 pm

    i’m trying to make a 3rd level sub-menu but i am having problems, I tried what you told Valeriu

    Create another unordered list inside of the one you want to add another submenu.

    Then add a class to the parent ul.
    Ex:
    $(‘.parent-class > li’).on(‘click’, function() {
    $(this).child(). fadeToggle(‘slow’)
    ;});

    but any attempt to style it or make it works is useless, still have no luck trying to add another submenu, can you please guide me to what to read or what to do to solve this? i would really appreciate it.

    thanks in advanced!

    Reply
    0
  59. Guuz May 11, 9:20 am

    Can the accordion menu open the submenu and activate a link at the same time?

    Reply
    0
  60. Guuz May 11, 9:33 am

    To be more clearly:

    When you click on the parent menu, it would fetch the html content and at the same time the submenu would show.

    Reply
    0
  61. radha krishna May 22, 10:02 am

    its not working in IE???? Can you please help out on the same… Thanks in advance…

    Reply
    +1
  62. Jorge Carreira May 27, 4:37 pm

    It IS possivel leave it active in the load of a pagina??
    EX: Charge in the menu 2 and in the 3 sub-menu and he open in the respective page with this open menu ?
    A problem that this have ! When load in the first menu to close automatically he has a break and have to load again , or was , two clicks !

    Reply
    0
  63. Drew May 30, 9:45 pm

    Excellent script! Thanks so much for posting this. I think it needs one more thing though:

    Currently when you click one of the links and it goes to that page, the first accordion opens when the new page loads. Is it possible to open the parent accordion of the sub-menu page that was clicked so the user experience isn’t interrupted by closing the menu they had open on the previous page?

    Thanks!

    Reply
    0
  64. Todd B Jun 24, 9:32 pm

    I want to collapse the active menu when clicked, so it toggles the slideUp or slideDown when clicking on the active header, how do I do this?

    Reply
    0
    • Adriano May 13, 9:57 pm

      Some changes in ready(funtion):

      $(document).ready(function() {

      // Store variables

      var accordion_head = $(‘.accordion > li > a’),
      accordion_body = $(‘.accordion li > .sub-menu’);

      // Open the first tab on load

      accordion_head.first().addClass(‘active’).next().slideUp(0);

      accordion_head.first().removeClass(‘active’);

      // Click function

      accordion_head.on(‘click’, function(event) {

      // Disable header links

      event.preventDefault();

      // Show and hide the tabs on click

      if ($(this).attr(‘class’) != ‘active’){

      accordion_body.slideUp(‘normal’);
      $(this).next().stop(true,true).slideToggle(‘normal’);
      accordion_head.removeClass(‘active’);
      $(this).addClass(‘active’);

      }

      else if ($(this).attr(‘class’) == ‘active’){

      $(this).removeClass(‘active’);
      $(this).next().stop(true,true).slideToggle(‘normal’);
      $(this).stop(true,true)

      }

      });

      });

      Reply
      0
  65. iusebootstrap Jul 29, 8:44 pm

    So.. has anyone got menu header links to work? none of the solutions here works for me :D.

    Reply
    0
  66. Orlis Aug 12, 11:56 am

    Hello.
    Thanks for the script! I find it very usefull, but I have a probem with the menu… I need to put several inputs in te , in order to the user could change parameters. But when I put a into the label I can no see it.
    Any idea??

    Reply
    0
  67. David Aug 23, 3:51 pm

    For whatever reason none of the sub menus are open on page load. I have the script exactly as written, which means that the first menu should be open on page load, but all of mine are closed and do not open until clicked…any thoughts?

    Reply
    0
  68. sara Oct 3, 9:57 pm

    Hi, I added the menu to the page but it adds a whole lot of white space before the menu. I have been searching everywhere for the solution on how to remove it. Do you have any suggestions? Thanks so much

    Reply
    0
  69. Jonathan Oct 16, 2:13 am

    Hi friends, I wonder if it is possible to change the images (icons) of accordions… like (mail, cloud.. etc)

    thks

    Reply
    0
  70. Andrea Nov 12, 12:19 pm

    Beautiful!!! How it’s possible to make it responsive so that it’s visible also on a smartphone? I’ve tried as is and the menu appear a lot small…

    Thanks!

    Reply
    0
  71. Adriano Martins Jan 28, 9:45 pm

    It worked perfectly.

    But when I went to adptar blogger. It does not slip when you click the menu

    Reply
    0
  72. Zysman May 12, 5:34 am

    Thank you so much for your work.

    I have created my menu based on your tutorial.

    I now have to create my sprites. I wonder where to find them and if you had to use photoshop to edit the hover version.

    Thank you in advance,

    Morg’s

    Reply
    0
  73. tomdouble May 20, 3:16 am

    my theme already loads the latest version of jquery:

    jquery.js?ver=1.11.0
    jquery-migrate.min.js?ver=1.2.1

    any idea what i do have to change in your script to make it working with the above jquery versions?

    Reply
    0
  74. hueman May 20, 10:36 am

    jQuery method to Disable “preventDefault()” for Node with NO sub-menu Items:

    accordion_head.on(‘click’, function (event) {
    if($(this).parent(‘li’).children(‘ul’).length > 0) {
    event.preventDefault();
    }

    ;)

    Reply
    0
  75. Massood Jul 11, 9:02 am

    Thanks for your menu, it’s great,
    the code is working great when it’s in html file, but when i just use it in my aspx file (C# .net) after i click any of items, it moves the page up that the selected item is in the top of the view.
    what can i do to solve the problem?

    Reply
    0
  76. esiaz Aug 26, 12:46 pm

    Hi is it possible to allow the parent of the submenu to remain highlighted and opened when submenu is clicked?

    Reply
    0
  77. peyman Sep 1, 1:44 am

    hi thank you for good menu
    when i use
    accordion head.eq( echo $sub; ).addClass(‘active’).next().slideDown(‘normal’);
    for recognize tab after refresh .this work correctly but tab closed after click on submenu .
    please help me for correction this problem
    thank

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters