Tutorial – How to Create a Metro Style Accordion

Posted By LukyVj on January 23, 2013 | Posted in AccordionFREEBIEMetroTutorial

7

Comments

Hello readers!
Today I’ve got a treat for you. We will be learning how to code a Metro Style Accordion menu in just a few steps. This menu uses jQuery and jQueryUI, it can be done in a few other ways but I will show you the way I do it, it’s just something I feel comfortable with. You can download the files (HTML / CSS / PSD) for this tutorial at the end of the article.

---

Summary:

• The Markup
• The CSS
• The Magic / JavaScript
• Demo / Download

---

The Markup

Let’s start by looking at the HTML for this menu. As you can see, the HTML is really simple and I’m sure you can understand it easily. We only have to use the ul and the li in the mark-up for the structure of the accordion followed by the insertion of the a tag into every li of the first level. This will make it into a link.

Now you might have noticed that we have set a class .close to each ul of the first level too, and we use the i tag to set an icon for each category. We then import the latest minified version of the jQuery code and the jQueryUI code. Using the minified version as much as possible will be great to keeping the size of the markup less and increase the load time on the page.

Let’s have a look at the HTML

<ul>
	<li>
		<a href="#"><i></i>Friends</a>
		<ul class="closed">
			<li>Jason Brody</li>
			<li>Gordon Freeman</li>
			<li>Master Chief</li>
			<li>Lara Croft</li>
			<li>Dirk the Daringk</li>
			<li>Mario</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Videos</a>
		<ul class="closed">
			<li>Paradise</li>
			<li>It's Time</li>
			<li>Sixteen Saltines</li>
			<li>Burn it Down</li>
			<li>First Of The YearYear</li>
			<li>Feel So Close</li>
			<li>Ballad Of Hollis Brown</li>
			<li>We Are Young</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Galleries</a>
		<ul class="closed">
			<li>Manga Artworks</li>
			<li>Anime Cosplay</li>
			<li>Skyrim Cosplay</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Podcasts</a>
		<ul class="closed">
			<li>Stuff You Should Know</li>
			<li>Outside the Lines</li>
			<li>The Nerdist</li>
			<li>Tekzilla</li>
			<li>The Ricky Gervais Podcast</li>
			<li>FormulaPod</li>
			<li>ESPN: Football Today</li>
			<li>Wired's The Monitor</li>

		</ul>
	</li>
	<li>
		<a href="#"><i></i>Bolts</a>
		<ul class="closed">
			<li>TheChive</li>
			<li>9Gag</li>
			<li>BroMyGod</li>
		</ul>
	</li>
</ul>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

The CSS

Now for the CSS. As you can see that most of the lines uses a  >  operator. For example, when I write body > ul > li it says that the li is the child of the ul which is the child of the body . You can surely use another method of doing this, I just stumbled upon this method and wanted to share it with you.

You see the font-face{...} bit that I’ve used to import the Lato font. We’ve also used the nth-child(*) method to target each of the categories and set the related icons body > ul > li:nth-child(*) > a > i

As for the counter, we used the CSS Counters technic which helps you implement an automated numbered count in CSS. We have added two classes .active and .closed. These classes will basically used to add functionality to the accordion. The .active class will color the background of categories when they will be targeted and the .closed will help us make the accordion’s categories expand and close. You can see that the height is set to 0px which is the value the pane will collapse back to once closed.

@import url(http://fonts.googleapis.com/css?family=Lato);

body{
max-width: 240px;
	margin: 100px auto 50px auto;
	background: #1f1f1f;
	text-align: center;
}
ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
font-family: Helvetica;
}
body > ul{
margin-bottom:200px;
border:1px solid #222;
}
body > ul > li{
position:relative;
}
body > ul > li > a{
display:block;
outline:0;
height:20px;
padding:10px;
text-decoration:none;
color:#fff;
background:#ea2d49;
border-bottom:1px solid #222;
font-family:Lato;
font-weight:300;
-webkit-font-smoothing:antialiased;
text-transform:uppercase;
font-size:14px;
}
body > ul > li > a > i{
display:block;
width:45px;
height:30px;
float:left;
}
body > ul > li:nth-child(1) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_friend.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(2) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_video.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(3) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_gallery.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(4) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_podcast.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(5) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_bolt.png)no-repeat top left;
/*background-size*/
-webkit-background-size:20%;
   -moz-background-size:20%;
     -o-background-size:20%;
        background-size:20%;
background-position:10px 3px;
}
body > ul > li > ul{
counter-reset:items;
height:auto;
overflow:hidden;
background:#fff;
color:#ec2b48;
width:100%;
}
body > ul > li > ul > li{
counter-increment:items;
padding:1em 1.3em;
border-bottom:1px solid #DDD;
font-size:12px;
cursor:pointer;
}
body > ul > li > ul > li:hover{
background:#f4F4F4;
}
body > ul > li:after{
content:counter(items);
font-size:14px;
position:absolute;
right:10px;
top:15px;
background:#c0273c;
height:30px;
padding:5px 20px;
margin:-15px -10px;
color:white;
text-indent:0;
text-align:center;
line-height:2;
/*box-shadow*/
-webkit-box-shadow:inset 4px 0 8px rgba();
   -moz-box-shadow:inset 4px 0 8px rgba();
        box-shadow:inset 4px 0 8px rgba();
}
body > ul > li > ul > li:after{
content:counter(items);
font-size:0.857em;
background:#f4f5f4;
height:100%;
margin:-27px 174px;
display:block;
float:left;
color:#c0273c;
text-indent:0;
text-align:center;
font-size:14px;
line-height:2.5;
border-top:1px solid #DDD;
height:38px;
width:48px;
}
.active{
background:#c0273c;
}
.closed{
height:0;
}

The Magic / JavaScript

Finally, we’re at the best part of it all. This is where the magic happens. What will follow are a few lines of jQuery. I’ll go on a explain what it means and will do before we get to the code.In our example, the $(this) is the equivalent to HTML’s a, so in this scenario the $(this) = a.

We will now write a function for when you click on the a tag, the function will simply add the .active class to the a tag along with the .toggleClass() class followed by setting a delay of 5 to the background color of the selected category _this.toggleClass('active', 5);.

We then remove the .close class to open the pane by targeting the .next() element once the a is active. It’s the ul, so the result will be that it opens it with a delay too, but a bit longer this time, to make this a smoother transition $(this).next().addClass('closed', 500);. And we collapse the open pane with these last lines of code. To do so, we need to target all a tags if they are not the clicked one and we will do this by writing .not(_this) and remove the desired class.

$(function() {
	$("a").bind('click',function() {
		var _this = $(this);

		// Expand the current link
		_this.toggleClass('active', 5);
		_this.next().toggleClass('closed', 500);
		// Contract the others and set off the 'active' state.
		$("a").not(_this).each(function() {
			$(this).next().addClass('closed', 500);
			$(this).removeClass('active', 5);
		});
	});
});

That’s it!

I hope you enjoyed this little tutorial and I would like to thanks Labib Jaffar who did an excellent work by designing this awesome Metro Style Accordion!

You can download the HTML files as well as the PSD. This is a freebie and you can use it however you like and we’d love to see how and where you’ve used it. Do post in the links in the comments section below.

---

View Demo | Download Source (PSD / HTML / 378KBs)