Vertical accordion menu using jQuery and CSS3

View code Play Walkthrough

Experiments

Description

A sleek vertical accordion menu for your next website/app.

The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.

This demo covers unlimited nesting.

Degrades gracefully upto IE8. Works in all major browsers.

Add New Comment

55 Comments

(close)
Zaf

Zaf

awesome :)

thinsoldier

thinsoldier

If anyone needs this to allow multiple areas to be open at the same time just make this small change to the JS

/*jQuery time*/
$(document).ready(function(){
$(“#accordian h3″).click(function(){
//slide up all the link lists
// $(“#accordian ul ul”).slideUp();
//slide down the link list below the h3 clicked – only if its closed
if(!$(this).next().is(“:visible”))
{
$(this).next().slideDown();
} else { $(this).next().slideUp(); }
})
})

David

David

Fantastic!! THX so much!

Jens

Jens

Is it possible for the menu to slide up instead of sliding down?

ChaBuku

ChaBuku

Does there have to be that top div? Can you not just use ?

FRANKhrystaLIN

FRANKhrystaLIN

I love this!

MinimalMonkey

MinimalMonkey

I have tried this code out, everything works fine, except for the fact that when I click a tab on the menu, the menu’s do not open. Anyone else have this? i’ve just copy pasted the code and linked everything correctly…

Rahys

Rahys

you are right i av done the same and its not working can someone please explain.

Deepu

Deepu

how to change icons? Can we put our icons instead of FontAwesome Icons?

Nokes

Nokes

Whoa! This is amazing! Thanks a million!

HA

HA

Done the same and its not working can someone please explain.

bala

bala

i tried this one it works great but one issue is that what if we had subcategories inside subcategories

Shakil

Shakil

can i make highlight current page?

Marcos

Marcos

função javascript necessita de adicionar mais um ul

jude

jude

I really appreciate that toto,it is very helpfull

Ariel

Ariel

Excelente ^^

Paradox

Paradox

How can I change the icons? Anyone?

megan

megan

i have “$ not define” error how to fix this?

guest

guest

Doesn’t seem to work right on IE 8.

walter

walter

simple and awesome!! thanks a lot

Brad

Brad

I should be able to make this support multiple sub-menus by editing the jquery, correct? If under the Dashboard -> Reports item there were a list of months and you could see a list of reports from each month. This menu worked great for one that I made, but I’m trying to alter it for a more complex menu. Thanks!

Ricks

Ricks

Well, i changed the #accordian for #Menu, when i click on any menu, it scrolls down but it dont scrolls back when i click again. Any help?

ravi bhardwaj

ravi bhardwaj

how can add its modified css and js content in my menu..??

cainiao

cainiao

thx and its nice

Anando Das Gupta

Anando Das Gupta

hi

its a lovely menu. I did some modifications to it .
1) active link should show active

so go to jquery page and edit . The code below will ensure that it stays active. Ofcourse you need to change css according to your need.

// JavaScript Document/*jQuery time*/
$(document).ready(function(){
$(“#accordian h3″).click(function(){
//slide up all the link lists
$(“#accordian ul ul”).slideUp();
//slide down the link list below the h3 clicked – only if its closed
if(!$(this).next().is(“:visible”))
{
$(this).next().slideDown();
}
})

$(“#accordian ul ul li”).click(function(){
$(“.active”).removeClass(“active”).addClass(“inactive”);
$(this).removeClass(“inactive”).addClass(“active”);
});
})

/*active and in active*/

.active { background: #003545;
border-left: 5px solid orange;
}

.inactive { background: #c6c6c6;; border-left:none; }

someone also asked how to change icons..its simple

you have to go to fontawesome website and find out the font icon names

so example what i did in the menu listing area

or

or

so you have to change class = icon-something

Anando Das Gupta

Anando Das Gupta

oh also people who are having problems with the menu , I hope you have added the jquery link

Hicham

Hicham

Excelent tutorials.
@admin: can you make a structred lesson i mean to begin from the scrutch in javascrip or php for exemple it will be just great.
Anyway i apreciate your work .
best wishes
thanks

asifagaria

asifagaria

I Love This WEb best idea to learn

raj900

raj900

need help guys.
the jquery page is not loading i.e., the js script is not being made use even though have linked it to the script in html page like this:

Victor

Victor

Por favor… me podrian ayudar hacer el menu del siguiente link http://codio.com/ muchas gracias!

Balint

Balint

When I click on a menu item I open another page then all elements are slid up. Is is possible to do this with jquery or do I need to use sessions?

Ila

Ila

thankyou very useful :)

Rob

Rob

Can I populate the menu using a xml file? how?
Thanks

Roya

Roya

I have problem with this code, the menu do not slide up or down. I need to change the into “active” so the menu opens

Himanshu Aggarwal

Himanshu Aggarwal

Its not working for me, plz help…I simply putted all the html, CSS and JS in my page, but its still not working..its showing static, active with TASKS’s li.
Plz help me out, Am I missing out something or what.??

Alaa mohammed

Alaa mohammed

So nice tutorial , thx

Maz Mawan

Maz Mawan

thanks this code, i hope success for this tutorial and gretting for me :D

karthick

karthick

hi i need to know how to add javascript coding into the page. or how to link it ?

GM

GM

I’m always smiling, watching you make it from scratch. Nice :-)

Roy Stannard

Roy Stannard

A really nice menu, but “unlimited nesting”, how is this implemented. I need 3 levels, Any help much appreciated

David

David

I have used the unlimited nesting code to make a great looking and quite large menu. So large that you need to scroll down to use the bottom half of the menu.

The problem is that the page view jumps to the top of the page when you click a menu option while scrolled down.

Has anyone encountered this, and perhaps solved it?

David

David

I posted yesterday about the jump to the top of the page when operating the accordion. This is super noticeable if you try to look at the yoghurt products on this page’s menu. http://www.greenlivingaustralia.com.au/PLAY.html

If anybody can help, it would be great to have this menu on my site.

Cheers … David

samay

samay

can u tell me how can do changes in the javacript so that when we hover it shows its element

kevin

kevin

can any one tell me when we hover , it should show its child element when we hover on its child , i have done changes in javascript used here, i m facing problem in order to achieve :

Sylvia

Sylvia

this menu is cool!
thanks for sharing!

but I have a question is that if I want to create a 3-tier menu and when I click the tier-1 it will down the tier-2 & tier-3 at the same time. I have tried but it doesn’t work…

the code like this:

Robert

Robert

When I click on a menu item I open another page then all elements are slid up. How to do to stay active what I have clicked ?
Thank you.

chana

chana

Hy friendz can u hlp me to work this

Glen Stobbs

Glen Stobbs

I cannot use the first line of the CSS

* margin: 0; padding: 0;

as it interferes with the rest of the website I am using this on. What do I need to do to make the list move left instead?

Maximum Shred Reviews

Maximum Shred Reviews

Thɑnks for finallky writimg about >Vertical accordion menu using jQuery and CSS3

mouly

mouly

js file is not working :(

5x 10x 15x 20x

55 Comments

Description