How to Create Accordion Menu in Pure CSS3

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

In this tutorial we will learn how to create an accordion menu in pure CSS3. This menu was inspired in Futurico UI Pro by Vladimir Kudinov. As we will create it with CSS this will only work on browsers and devices that support the :target pseudo-class selector.

Step 1 – HTML Markup

Create an unordered list with an anchor tag and a span tag. Add a different id for each list item and link to this id with the anchor tag. To be able to style and open the accordion when we click on it we need to use the :target selector. The target selector will only work if we will have a link that points to an id and when we click on that link the id becomes the target element. And with this way we are able to make the sub menu links visible.

<ul class="accordion">

	<li id="one" class="files"><a href="#one">My Files<span>495</span></a></li>

	<li id="two" class="mail"><a href="#two">Mail<span>26</span></a></li>

	<li id="three" class="cloud"><a href="#three">Cloud<span>58</span></a></li>

	<li id="four" class="sign"><a href="#four">Sign Out</a></li>

</ul>

Step 2 – Menu Layout and Basic Styles

First of all we’ll add some reset styles to the menu to clear the margins, paddings, etc.

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

.accordion li {
	list-style: none;
}

Now let’s style the menu links. We will add a CSS3 gradient, some shadows and more basic styles for font, etc.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

The menu will not have a fixed width. It will take the entire width of his parent, so if you want to give it a 300px width just create a div and give it the width that you want. In order to prevent layout issues we will give it a minimum width of 160px (110px width + 50px padding).

.accordion li > a {
	display: block;
	position: relative;
	min-width: 110px;
	padding: 0 10px 0 40px;

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

	background: #6c6e74;
	background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
	background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

	-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);
}

To style the span that will contain some numbers we’ll give a gray background color, some shadows and rounded corners.

.accordion li > a span {
	display: block;
	position: absolute;
	top: 7px;
	right: 0;
	padding: 0 10px;
	margin-right: 10px;

	font: normal bold 12px/18px Arial, sans-serif;
	background: #404247;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

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

Step 3 – Icons

To insert the icons we will use the :before selector, this selector inserts content before the selected element. So this way we are able to insert the icons and position theme.

The icons images that we will use have 24px width and 24px height. So we’ll position them on top left and add some margins to center the icons properly.

.accordion > li > a:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 24px;
	height: 24px;
	margin: 4px 8px;

	background-repeat: no-repeat;
	background-image: url(../img/icons.png);
	background-position: 0px 0px;
}

I’ve created a sprite image that contains all the icons (normal and hover state). The advantage of using sprites is that we are able to load all the icons at the same time (fewer requests) and as we only have one image that contain all icons the size will be inferior.

If you want to learn more about image sprites I recommend you to read this.

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a: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 { 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 { 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 { background-position: -72px -24px; }

Step 4 – Sub Menu Links

HTML

To create the sub menus add another unordered list with the class of sub-menu inside of the list item that you want to have sub menus.

<li id="one" class="files"><a href="#one">My Files<span>495</span></a>

	<ul class="sub-menu">

		<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>

		<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

		<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

	</ul>

</li>

CSS Styles

The styles of the sub menu links are almost the same. We’ll only change the colors, shadows, etc. We also have added an “em” tag that will contain some enumeration.

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

	background: #e5e5e5;
	border-bottom: 1px solid #c9c9c9;

	-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; }

.sub-menu li > a span {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: transparent;
	border: 1px solid #c9c9c9;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.sub-menu em {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 14px;
	color: #a6a6a6;
	font: normal 10px/32px Arial, sans-serif;
}

Step 5 – Hover and Active states

For the hover and the current active link state we will change the gradient to a green one and also change the styles of the “span” to green. As in Futurico UI this accordion uses a pattern I have added it. You can choose if you want to use the pattern or the CSS3 green gradient. For the sub menu hover state only change the background color to a brighter one.

.accordion > li:hover > a,
.accordion > li:target > a {
	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 {
	color: #fdfdfd;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
	background: #3e5706;
}

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

Step 6 – Show and hide the sub menu

We’ll give 0px height to the sub menu to hide it and also add a transition slide effect. In order to make the slide transition work we need to give a fixed height to the sub menu. So if you want to add a different number of links to each sub menu you need to add a different height to each sub menu according to how many links you have. As I only have three links I use 98px height, if you want to make it automatic add a 100% height value but the slide effect will not work.

.accordion li > .sub-menu {
	height: 0;
	overflow: hidden;

	-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: 98px;
}

Conclusion

We have finished this Pure CSS3 Accordion Menu. Hope you like it and don’t forget to live some feedback or any question you have in the comments.

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

39 Comments
  1. Riz Feb 28, 9:11 am

    Simply Awesome Tutorial.
    Thanks.

    Reply
    +2
    • mboadi Mar 29, 11:32 am

      Hi,
      can anybody help me stop the sub menus from collapsing when its active. I tried commenting out the tranisition effects in the css but doesnot work submenus with links(only works submenus without links.). I need help ASAP. Please help me out.

      Reply
      +4
  2. Nora Reed Feb 28, 10:58 am

    Great work! Its totally amazing and workable css of menu design!

    Reply
    -1
  3. kseso Feb 29, 1:31 am

    Nice and good job.
    But there’s a little problem.
    The selected menu item jumps to the top of the window because you use the pseudo-element “:: target”.
    Do you know Chris Coyier´s tabs, whith “:checked”? css-tricks.com/functional-css-tabs-revisited/

    Reply
    0
  4. kawa Feb 29, 11:05 am

    It’s a very good CSS tip, BUT
    but it’s using anchors and in a real page, not a preview, each time we click on an item, the page “move” to menu clicked and it’s very annoying. I personnaly prefer the accordion menu using checkboxes or radio rather than href.
    Whatever, thank you for this tutorial.

    Reply
    -1
  5. Bogdan Silivestru Mar 2, 10:13 am

    You can actually move the transition from the UL.sub-menu to UL.sub-menu LI . This way, you can add any number of links without touching your styles. http://jsfiddle.net/omulet/GuvB4/2/

    Reply
    0
  6. Heidi Mar 21, 3:14 pm

    Great tutorial.
    I have one little problem though; when I use the buttons the whole page jumps so the first li is in the top of the browser window.

    Any ideas how I can fix this?

    Reply
    0
  7. Wolf Mar 30, 1:13 pm

    Cool tutorial,
    I#m suprised how easy it is. If you know it :-)
    many thanks

    Reply
    0
  8. Adrian Apr 18, 8:19 am

    I’m trying to make each link in the sub-menu direct me to a different page, and therefore don’t want to use a href=”#one”, etc, rather each one will be unique (though I might have three or four items in each sub-menu)

    Am I correct in thinking that this menu concept isn’t going to work for me?

    Would be a shame, because it looks great, and this concept works well on phones

    Reply
    0
    • Adrian Apr 20, 9:09 am

      I misread some of the HTML markup (didn’t notice at first that the #one IDs were only one the top level), and have just completed getting this working for a site whereby with the addition of some CSS media queries, now have a mobile optimized menu structure going on

      Thanks, nice tutorial

      Reply
      0
  9. #nycmixing Jun 1, 4:25 pm

    Question, how do you keep the window pane open when a link is selected, rather then having the selected area close as soon as the mouse stops hovering over the selected link?

    Reply
    0
  10. Shane-mng Jul 12, 11:05 pm

    This is a great way to make use of pseudo :target selector. At the same time, I notice users can not close the submenu by clicking on its parent LI element

    Reply
    0
  11. Lucas Sep 13, 9:22 pm

    Great – Which license ist that? Can i use the icons and the code on my page (not commercial)?

    Reply
    0
  12. Mirko Sep 16, 7:02 pm

    Thank’s for the great tip. I have tried to build my own accordion menu following your tutorial.
    The problem is that I am not able to style my submenu. It takes over the css of .accordion li > a and no matter what changes i make to .sub-menu li a, nothing happens…

    Any suggestions?

    Reply
    0
  13. Hugo Sep 29, 11:55 am

    Hi. This tutorial is great. I have adapted the design to my needs and it works perfectly. Thank you!!
    I just have one question left: is there a way to add a sub-menu to the sub-menu? I added one more unordered list and styled it. But the animation doesn’t work like i would like to. Ideally the second sub-menu list should expand only when i hover it’s parent in the first sub-menu… Any idea how to achieve that?

    Reply
    0
  14. googs Oct 23, 6:35 pm

    I am facing a problem, if we have not a sub menu a want to give a hyper link on the main menu then how do it. please help me.

    Reply
    0
  15. WheelieSimple Jan 5, 1:24 am

    I am trying to have variable height submenus. Help! I have tried max and min height and neiher works.

    Reply
    0
  16. Ronald Jan 8, 3:37 am

    why is it that my sub menu is not hiding?

    Reply
    0
  17. Marcy Jan 27, 9:58 pm

    Help! I cannot get the sub menus to hide. They just stay open all the time. How is this accomplished?
    Everything else works & looks great though. Thanks for this tutorial!

    Reply
    +1
  18. Ryan Johnston Mar 13, 7:19 pm

    Awesome example, thanks for sharing!

    Is there a way to extend this example to allow for 3 levels?

    I’d very much like to use this menu example, but I can’t figure out how to add a third menu. Any help would be greatly appreciated!

    Reply
    0
  19. Kevin Morrissey Mar 28, 1:04 am

    Excellent CSS menu, thanks for sharing.

    Just a little upgrade to consider. If you have more than 3 menus the height of 98px needs to be changed but if you are generating the ul and li tags from a database with json like I am the height needs to be dynamic. so…

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

    changing the height to auto allows unlimited submenus.

    Reply
    -1
    • Heejin Jo May 16, 7:48 pm

      I’ve tried what you suggested, but

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

      would be better than ‘auto':)

      Reply
      0
  20. E.W. Apr 23, 4:16 pm

    Very good! Big thanks!

    How about “sub-sub-menu” and “sub-sub-sub-menu” and so on?
    And my body’s height is over 4000px, is that possible to stop scrolling to #three?

    Reply
    0
  21. auditya Jul 6, 1:29 pm

    when i download
    there’s a cssrefresh.js on

    but i can’t find it anywhere

    Reply
    0
  22. Murat Jul 10, 9:27 am

    .accordion li:target > .sub-menu {
    height: 98px;
    }

    What should I do when there’s more than 3 sub-menu elements in the menu? It’s ok to use 98px for any 3 itemed menu but if the menu has more than 3 items, 4th and other items doesn’t show. Is there a way to expand the menu according to the sub-menu items inside it?

    Reply
    0
  23. Andre Aug 1, 10:56 pm

    Very nice menu.
    One more question: How can i add a third level?
    MyFiles >> Dropbox >> Private

    Reply
    0
  24. Dims Aug 17, 5:50 pm

    Hi,

    Thanks for this menu but one question for me, is it full compatible with IE ?

    If not, what are we need to modify for it ?

    Reply
    0
  25. Mark Aug 31, 9:53 pm

    Hi

    This is a really great tutorial, i have been looking for a slick accordion style solution i can use in my project, and this looks impressive.

    Is it possible to make the menu items open and close on Mouse Hover ?

    Currently, you have to click on the menu item for it to open, can this be done using Mouse Hover ??

    Thank you, and thank you for a great solution, i have also seen alot more of your other items and products, really stunning work. I look forward to using you again in the near future.

    Mark

    Reply
    +1
  26. Joseph Oct 2, 10:17 pm

    Good and simple design. It helped me lot.
    Thanks alot.

    Reply
    0
  27. andrea Nov 11, 9:20 pm

    Very very good one. Just one thing. How can I make this responsive so that he can adapt to any device if I shrink the window?

    Reply
    +1
  28. Robbie Apr 12, 6:27 pm

    Thanks for the tutorial. It obviously works well, and it’s exactly what I’m looking for, but I’m a coding beginner (ish) and I’m not able to get it to work. I’m unclear where to paste all of this code. I’ve read about externally linking the html code to the css code which I think I’ve got figured out, but when I publish- I’m not seeing any of the css properties for the menu. Any help on where to go to search for it?

    Thank you in advance

    Reply
    0
  29. Caleb Jun 13, 7:42 pm

    Hi, thanks for the tutorial, my only question is what I can do if I want to have a different number of items under each sub menu. In one I have 3 items but in another I have 7, is there any way to make this work without making several different classes of sub-menus? Thanks!

    Reply
    0
  30. Lem Nov 25, 10:42 am

    Ive created a few accordion menus with :target
    Two things I still haven’t been able to implement:

    1. Click to Close the accordion.
    2. Multiple independent “Groups” of accordions where there is no interaction between groups of different name.

    id love to have some advice on how it can be done without JS if possible.
    Cheers, Lem

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters