7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

Categories

Shop

Search

Follow us

How to Create Accordion Menu

(CSS3+jQuery)
Valeriu TimbucCSS3, jQuery, TutorialsFebruary 29, 201289
Comments

Sign In

Designmodo Market

Show more

UI KIT

Ink - iOS Screens

$58

WIREFRAME KIT

Basement

$68

http://designmodo.com/jqueryaccordionmenu/

1/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

ICONS

Swifticons

$98

SCENE GENERATOR

I amUI KIT
Creator

$29 Grade
$59

SCENE GENERATOR

Fancy Items

$38
Our Products

Show more

WORDPRESS PLUGIN

Qards

$99
Topic: jQuery / CSS3
Difficulty: Intermediate
Estimated Completion
http://designmodo.com/jqueryaccordionmenu/

Time: 30 mins

DESIGN FRAMEWORK
2/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

Estimated Completion Time: 30 mins

Startup Framework

$249

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

DESIGN FRAMEWORK

Flat UI Pro

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

Newsletter

$39

Get our products/news earlier than others, lets get in

touch.
Enteryouremailaddress

Subscribe

207,620Subscribers

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

Sponsors

browser it will continue working with just CSS.

1
2
3
4
5
6
7
8
9
10

<ulclass="accordion">

<liid="one"class="files">

<ahref="#one">MyFiles<span>10</span></a>

<ulclass="submenu">

<li><ahref="#"><em>01</em>SubMenu<span>1</span></

http://designmodo.com/jqueryaccordionmenu/

3/62

7/2/2015

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

</ul>

</li>

<liid="two"class="mail">

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

<ulclass="submenu">

<li><ahref="#"><em>01</em>SubMenu<span>2</span></

</ul>

</li>

<liid="three"class="cloud">

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

<ulclass="submenu">

<li><ahref="#"><em>01</em>SubMenu<span>3</span></

</ul>

- Advertise With Us </li>

<liid="four"class="sign">

<ahref="#four">SignOut</a>
Popular Posts (Month)

<ulclass="submenu">

Summer Discount on Designmodo 50% Off!

<li><ahref="#"><em>01</em>SubMenu</a></li>

How to Create Sticky Navigation with CSS or

</ul>

jQuery
</li>

51

</ul>

http://designmodo.com/jqueryaccordionmenu/

Clever Use of Maps in Website Design

Fresh Trend in Navigation: Full-Screen Menus

4/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

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.

Fresh Trend in Navigation: Full-Screen Menus

Installing Bootstrap and the Bootstrap Grid
System
Free UI Kits for Sketch App and Website

AdsbyGoogle

Designers

MenuBar
DropDownMenu

I am Creator Perspective Edition

CSS3Menu

Wood & Bone Promotional Mockups

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

How to Create an Icon Design Workflow in

Sketch App 3

.accordion>li:hover>a,
Basement iOS Wireframe UI Kit
.accordion>li:target>a,
.accordion>li>a.active{
color:#3e5706;
textshadow:1px1px1pxrgba(255,255,255,.2);

/*background:url(../img/active.png)repeatx;*/
Top Articles
background:#a5cd4e;
background:mozlineargradient(top,#a5cd4e0%,#6b8f1a
background:webkitgradient(linear,lefttop,leftbottom
background:webkitlineargradient(top,#a5cd4e0%,#6b8f1a Responsive Web Design: 50 Examples
background:olineargradient(top,#a5cd4e0%,#6b8f1a100%
background:mslineargradient(top,#a5cd4e0%,#6b8f1a
Principles of Flat Design
background:lineargradient(top,#a5cd4e0%,#6b8f1a100%
}

Linecons: Free Vector Icons Pack

Flat Design and Color Trends

1
2
3
4
5

.accordion>li:hover>aspan,
.accordion>li:target>aspan,
.accordion>li>a.activespan{
color:#fdfdfd;
textshadow:0px1px0pxrgba(0,0,0,.35);

http://designmodo.com/jqueryaccordionmenu/

16 Places to Find the Best Free Stock Photos

Material Design Resources and Inspiration
5/62

7/2/2015

5
6
7

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo
textshadow:0px1px0pxrgba(0,0,0,.35);
background:#3e5706;
}
New Fonts Released in 2015

How to Create a CSS3 Dropdown Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.accordionli.files>a:before{backgroundposition:0px0px
Create an Image Slider using jQuery and CSS3
.accordionli.files:hover>a:before,
.accordionli.files:target>a:before,
.accordionli.files>a.active:before{backgroundposition:
Responsive jQuery Image Sliders and Galleries

.accordionli.mail>a:before{backgroundposition:24px0px
jQuery Animation Techniques and Tutorials
.accordionli.mail:hover>a:before,
.accordionli.mail:target>a:before,
.accordionli.mail>a.active:before{backgroundposition:24px

.accordionli.cloud>a:before{backgroundposition:48px0px
.accordionli.cloud:hover>a:before,
.accordionli.cloud:target>a:before,
.accordionli.cloud>a.active:before{backgroundposition:

.accordionli.sign>a:before{backgroundposition:72px0px
.accordionli.sign:hover>a:before,
.accordionli.sign:target>a:before,
.accordionli.sign>a.active:before{backgroundposition:72px

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.

http://designmodo.com/jqueryaccordionmenu/

6/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

1
2
3
4
5
6
7

.accordionli>.submenu{
display:none;
}

.accordionli:target>.submenu{
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, its your choice. Next add the
following code to the bottom of you HTML file just before the closing tag.
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

$(document).ready(function(){

//Storevariables

varaccordion_head=$('.accordion>li>a'),
accordion_body=$('.accordionli>.submenu');

//Openthefirsttabonload

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

http://designmodo.com/jqueryaccordionmenu/

7/62

7/2/2015

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

//Clickfunction

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

//Disableheaderlinks

event.preventDefault();

//Showandhidethetabsonclick

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.

http://designmodo.com/jqueryaccordionmenu/

8/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

1
2

varaccordion_head=$('.accordion>li>a'),
accordion_body=$('.accordionli>.submenu');

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

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.
1

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.
1
2
3
4
5
6

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

Conclusion
Thats it! I hope you have
http://designmodo.com/jqueryaccordionmenu/

enjoy it and be useful for you. Dont forget to let us

9/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

Thats it! I hope you have enjoy it and be useful for you. Dont forget to let us
know your feedback and subscribe.

Download Accordion Menu

Sign in to Download
Just click one of the buttons below to get instant access.
Your account is 100% secured and safe from spam!
Sign In Via Facebook

Sign In Via Twitter

Sign In Via Google

By clicking on the button(s), you agree with Terms of Use, Privacy Policy

http://designmodo.com/jqueryaccordionmenu/

10/62

7/2/2015

HowtoCreateAccordionMenu(CSS3+jQuery)Designmodo

AdsbyGoogle

51

877

JqueryMenu
SlideMenu
HowtoCreateaMenu

Like

Tweet

71

Related Posts

Fresh Trend in

How to Create Sticky

Interesting Navigation

Navigation: Full-Screen

Navigation with CSS or

Examples in Website

Menus

jQuery

Design

http://designmodo.com/jqueryaccordionmenu/

11/62