Apple have always been Gods in terms of the way they present themselves and their products. I just love the sidebar on the Apple Startpage, and wanted to use the Accordion plugin in jQuery UI to achieve this! As if that's not enough for me, I want to be able to show and hide it at my pleasure as well. I'm gonna show you how!
Preface
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation, there is a tutorial on that here for Windows, and here for OS X.
Files you'll need.
We need a total of 6 files for this tutorial:
- functions.php - This will hold a small line of code registering our sidebar.
- index.php - We most definately need this file. Any guesses why?
- jQuery - Here's version 1.2.6 for you.
- jQuery UI (accordion) - We only need the Accordion plugin and the UI core, not the whole UI library.
- sidebar.js - Contains all the jQuery code for the sidebar.
- style.css - Needed to activate the theme, and contains all CSS.
- images folder - I'll give you a list of images to fill this up with a bit later on, in the CSS part. For now, though, we only need 1 image that is in the HTML - the RSS icon! Place it in the folder 'images' and let's get started!
Don't forget to activeate your Wordpress theme (which should be aptly named sidebarTheme) in Dashboard! Right. To the tutorial! We're going to start off with the HTML and Wordpress we'll need. This will include the strcutre we'll need, Then we'll fill it up with the Wordpress code that will display posts and register and show our sidebar. It'll still look icky after this, so we'll fix it up with some pretty CSS that'll make it somewhat resemble the apple startpage, and make the sidebar look apple-y too. We do this before the JS so those without JS still see the pretty lookin' thing. Then, finally, my favourite - the jQuery. We'll animate it open and closed, and use accordion() and it's parameters to generate the hover effect.
Step 1 - HTML
Quickly open up functions.php, and put this in:
<?php
if(function_exists('register_sidebar')){
register_sidebar(array('name' => 'appleQuery'));
}
?>
functions.php is automatically picked up by PHP/Wordpress and executes the functions. This function asks Wordpress to register a new sidebar in the Dashboard to add widgets to it. That's not all though... We need to put that into our theme! I'll explain that after the HTML/Wordpress bit next. The array just names the sidebar, so that in Dashboard we can select which sidebar to edit (not really a problem... More of a good habit incase of numerous sidebars).
Copy or type this into your index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-accordion-1.5.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/sidebar.js"></script>
</head>
<body>
<div id="wrapper">
<h1><?php bloginfo('name'); ?></h1>
<div id="sidebar">
<ul>
<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar()) : ?>
<?php endif; ?>
</ul>
</div><!-- end div#sidebar -->
<div id="content">
<div id="topStories">
<span id="sidebarToggleButton" class="sidebarOpen"></span>
<strong>Top Stories</strong>
<?php echo date('F j, Y H:i A e'); ?>
<a href="<?php bloginfo('rss2_url'); ?>" title="RSS 2 feed"><img src="<?php bloginfo('template_directory'); ?>/images/rssIcon.gif" alt="" /></a>
</div>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<span class="postDate"><?php the_date('F j, Y'); ?></span>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content('(read more...)'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!-- end div#content -->
</div>
</body>
</html>
Explanation
Ok... I know that's a lot. A lot a lot. But this tutorial doesn't specifically focus on Wordpress and HTML, but I'll pick out the interestings that you should probably understand.
- The whole sidebar segment - This is the main part of what's important. What we're asking wordpress, is that if, in the entire local wordpress engine, the function dynamic_sidebar is present (which it is in functions.php), execute the function. The appleQuery specifies the name of the sidebar that we assigned it (in functions.php, remember?).
- <?php echo date('F j, Y H:i A e'); ?> - This is some raw PHP to echo the current date and time of the user. It's only in here because it's on Apple! It's in the format of: (Month DD, YYYY 00:00 AM GMT).
- <?php bloginfo('rss2_url'); ?> - Look in the head element... Do you see the same thing? Once again, it's on Apple's website. It's just the XML entries feed for the blog.
- <span id="sidebarToggleButton" class="sidebarOpen"></span> - Nothing amazing... This is just the button that'll toggle the visibility of the sidebar. I've made it a span so it's not clickable for JSless browsers, but using the .click() function of jQuery people WITH JS can!
So with the HTML and Wordpress all up, I'd suggest going into your WP Admin, and adding a few widgets to your blog. For some reason, Search doesn't have a title, and the tag cloud widget doesn't disappear - Go figure! I used the following in mine:
- Categories
- Archives
- Links
- Pages
- Meta
And it should look something like this: Kinda ugly huh? Never fear, CSS is here!
Step 2 - CSS
Yes, fantastic CSS is here to save the day! We want to create something somewhat remenisce of this (photoshop mockup):
Some things to note
- I've done my best to stick to ems in terms of font-sizing, so the 75% just downsizes all text to 12px which becomes 1em. That's for another tutorial though!
- In the h1 code I've used 'text-shadow'. This is CSS3. It just contributes to the applesque look!
- #content - Has a background colour of white. Why you ask? The background will always be white anyway, what's the point? Well, my friends, when we get to the jQuery we need #content to become a blanket for the sidebar, and if there is no background set, it'll be transparent thus showing the sidebar.
- #sidebarToggleButton - That's one hell of a name... This sets the button that will toggle the visibility of the sidebar to be correctly in position, but invisible to the JSless people. When we move onto the JS, the background images will be applied then, so they only show for the JS people!
Those 3 things are just about the only quirks in there. I've tested that code in FF, Safari 3 and Opera 9, and it all looks perfect! Here is how it should look:
Step 3 - jQuery Time!
I love jQuery! I love it that you can translate words to code so easily, and I always start off by doing the words. Here is a basic idea of what we want the script to do.
- Hide the sidebar.
- On clicking '.sidebarOpen', toggle the following:
- Remove the class 'sidebarOpen'.
- Add the class 'sidebarClose' (which we'll style next section).
- Animate the sidebar to slide out from under (literally, using position: relative;)
- Animate (this) to move X amount of pixels to the left (so that it stays in line with the sidebar).
- Initiate the Accordion.
That all seems like a lot (but it's really not...) so I'll take you through it step by step. Open up the file you created called sidebar.js and start typing!
Step 3.1
As always, don't forget to wrap everything in jQuery's special document ready:
$(document).ready(function(){
//jQuery code goes here
});
Put everything here on between the document ready!
Step 3.2
$("#sidebar").css({ left: "205px"});
This 'hides' the sidebar by manipulating the DOM level CSS. It doesn't really, it just gets swept under the rug. The literal rug being div#content. This wont actually work until we've added a little more CSS, but I'll cover after this section.
Step 3.3
$(".sidebarOpen").toggle(function(){
$(this)
.removeClass("sidebarOpen")
.addClass("sidebarClose")
.animate({right: "205px"}, 500);
$("#sidebar").animate({left: "0px"}, 500);
}, function(){
$(this)
.removeClass("sidebarClose")
.addClass("sidebarOpen")
.animate({right: "0px"}, 500);
$("#sidebar").animate({left: "205px"}, 500);
});
OK I can understand your confusion. This is a lot for a step by step instruction right?! Well yeah... But it's actually 2 very similar things. The first function in the .toggle() will:
- Removes the class of 'sidebarOpen' (the classes are for CSS in the next section).
- Adds the class of 'sidebarClose'.
- Animates our little button to slide to the left alongside:
- The sidebar sliding out itself, being animated with jQuery. Both are set to come out during half a second, so they should move together.
The thing is, is that the second function is exactly that, but in reverse! It:
- Removes the class of 'sidebarClose'.
- Adds the class of 'sidebarOpen'.
- Animates our little button to slide back in to the right alongside:
- The sidebar sliding back in.
See! Not so hard. It's just a lot of code to read over.
Step 3.4
Accordion time! Yay! We finally get to use the ever present jQuery UI. The way they've designed the widget makes it super simple to impliment:
$("#sidebar ul").accordion({
header: 'h2',
event: 'mouseover',
activeClass: 'selected'
});
It's just the one .accordion() function, applied to the ul within the #sidebar div. The parameters (one per line) are as follows (pretty self explanitory... But eh):
- header - This defines the handles of each accordion 'drawer' - In our case, the h2 of each widget.
- event - Defines when to change drawers, and we want the hover effect like Apple has, so we use mouseover
- activeClass - This is handy for the little extra CSS we're about to endure. It gives the expanded drawer a class of 'selected'.
That's all the JavaScript code we'll be needing. It's all pretty straightforward, and easily modified to suit whatever you need!
Why this is so fantastic
I feel this hasn't been glorified enough yet! The amazing thing about the accordion plugin is that you don't have to edit any of the Wordpress generated code, which we haven't formatted ourselves at all (aside from the wrapping ul, but that's necessary regardless). Not only is it 100% unobtrusing and 100% unreliant on edited HTML code, but it's also a short quick function. Accordion does all the dirty work of selecting, animating, activating, changing classes, etc. It's great! Consider AccordionUI glorified! You should most probably have something similar to this (I've put the accordion in very lightly so you can see where it should be):
Step 4 - jQuery CSS
So obviously we're going to need a little extra CSS to cater for all the chopping and changing jQuery does for us. Things needing additional styling are:
- #sidebarToggleButton - Using the classes that jQuery assigns for us, we can now safely style the images 'sidebarClose.png' and 'sidebarOpen.png' that I got you to save earlier.
- The accordion definitely needs some work. We need to fix the square corders with some CSS3 and style the active class.
/* jQUERY CSS */
#sidebar>ul{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
}
span.sidebarOpen{
background: url(images/sidebarOpen.png) no-repeat center;
}
span.sidebarClose{
background: url(images/sidebarClose.png) no-repeat center;
}
h2.selected{
background: url(images/activeBg.png) repeat-x !IMPORTANT;
color: white !IMPORTANT;
}
Just 2 things to note:
- #sidebar>ul - That is, the direct ul child of #sidebar gets the cool rounded corders - still beta CSS3. But works in all Mozilla, Opera and WebKit based browsers.
- !IMPORTANT - This is needed to override what has previously been set - the default handle grey background.
And so now, your final product show be something pretty like this: (Click for HTML version) 
Wrapping up
So we've gone over a bit of stuff in this tutorial. We've looked at dynamic sidebars, A lot of jQuery to show and hide the sidebar that is infact an accordion in itself! This tutorial was aimed at using additional plugins for the default jQuery (We plugged jQuery UI in), and also the dynamic_sidebar function.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Damir July 29th
Very nice.
( )Arun Stanislavose July 29th
Great Tutorial..Was looking for something like dis.. but if u check u can see it does have some problems in IE 6.. Anyways thanks..
( )Daniel Erickson July 29th
Thanks for the TUT! I’m working on a project right now that uses the jquery accordion, so this will be very helpful.
( )Alex Coleman July 30th
Too cool, I’ve been curious how to implement this technique. Thanks!
( )Ferris July 30th
Very nice, but it also has some issues on IE7. The blue arrow floats in the titlebar of the first article and there are spaces between the category buttons of the sidebar… how about some crossbrowserchecking…
( )And CSS3? Nice, but not fully supported by the mainstream browsers yet…
Shane July 30th
nice tutorial - to be honest, it’s an effect that I’m not too keen on, but hey.
( )Mohsen July 30th
Thanks a lot for the tutorials! This effect is used in cuil.com too
( )Joefrey Mahusay July 30th
Nice one!
( )P July 30th
Great tutorial!
( )Dan July 30th
useful tut
( )Sean O July 30th
Nice looking effect, thanks to jQuery UI. However, a larger, more descriptive button is called for here. Us web-aware types know to click on the little bright blue arrow to make something happen, but the majority of our readers likely will not. Even adding a ~10pt ‘MENU’ next to the arrow graphic would serve as a more prominent indicator.
( )Michael Thompson July 30th
I agree with Sean, but would take it further: do NOT hide your sidebar — the container your for your blog’s navigation. There is not a single good reason to do this and I would challenge the author of this article and anyone reading this comment to prove me otherwise (here’s a hint: there truly isn’t a good defense for this decision).
Other than that, a solid tutorial for the drag-and-drop designer.
( )James July 30th
It’s a nice tut but I would never integrate it on a site of mine unless specifically requested by the client. It can be argued that the single most important thing about a website (after content) is navigation - hiding this from the user is evil! … Yes, yes, it is a “cool” effect but coolness very rarely means usability!
( )James July 30th
Didn’t see Sean or Michael’s comments… I agree with you both.
( )dlv July 30th
really nice, i loved the explanation step by step, i’ve learned so much…thanks a lot for the time and the job to show us your work.
( )thank!
adeux people!
Mark Abucayon July 30th
wow pretty cool tuts I never know this one yet. Thank you
( )Ty July 30th
I only think it could be a problem, since it is a sidebar, assuming there were other parts of the website on the left would it show over the top of the main content or push it out of the way?
Sounds problematic in those regards, I agree it is a cool concept.
Assuming also there is another form of main site navigation, and this is just a quick jumping off point for regular site users, what could be easier, and no it’s not necessarily evil, as someone else implied.
I prefer an accordion menu that only slides tabs, when you click on them, with jQuery this would be easily accomplished.
( )Geoff July 30th
Michael Thompson = 100% da man.
( )Aside from that, a great feature.
Peter July 30th
Nice tutorial - thanks again!
( )ps. display errors in IE 7 (I know everyone hates this browser…but it is the one that gets used the most)
Jason July 30th
Very nice, may have to use this technique on a site I’m working on. Thanks!
( )yamaniac July 30th
nice 1
( )Shane July 30th
@James - yes - I find that with a lot of effects.
I LOVE jQuery - but we have to be careful not to alienate our users - I often get annoyed by flash sites, doing odd things - rating flashiness (pardon the pun) over usability of the site in question.
Let’s not get carried away with jQuery and make the same mistakes.
( )Connor July 30th
Nice demo, looks a lot like the demo for the plugin…
( )http://ui.jquery.com/repository/real-world/accordion-drawers/
James July 31st
@Shane - I think the main problem is that jQuery makes it too easy to add these animations… So everyone feels like they have to use all of the effects at once! … When I started with jQuery I felt the same and was always using slideIn or fadeIn …
Like you said, it’s important that we don’t lose sight of oour users.
Unless you’re making a Web app (Like gMail) JavaScript should only ever be used to enhance the user’s experience…
( )Shane July 31st
@James - dead right. My personal opinion is that most of the effects are annoying - they don’t improve my enjoyment of a site.
( )insic July 31st
Very nice job. another great tutorial in nettuts.
( )Taylor Satula July 31st
Dang thats cool
I <3 NETTUTS
( )Braden Keith July 31st
Pretty cool. Doesn’t fit in with my theme, but if it did. Oh if it did.
( )Lamin Barrow August 2nd
Jquery is awesome and it is a little known fact that apple relies on it for most of the effects on thier website. Thanks so much for the tut.
( )Taylor Satula August 6th
Very Cool… Ummm what font is the header of iBlog
( )Harley Alexander August 7th
@Taylor: Lucida Grande Bold, same as the rest of the text.
@Everyone: Guys and Gals, I know this is a very effects based tutorial - and that’s exactly the point! I don’t see the point in showing or hiding a Sidebar either, but correct me if I’m wrong, teaches basics of .animate, and also the use of UI Plugins? If you’re looking for practical uses, then there are probably very few for this. However, I’m people learnt about animate here.
( )Pablo DiCiacco August 9th
This is great! Thank you. If I may ask a couple of ignorant questions…
I am toying with the CSS and not sure which variables to change so that the content width can double and not interfere with the layout of the slider and accordian. For instance, if I want to change the content to 650 width, what else do I need to change to maintain layout?
Thank you,
( )Pablo
Pablo DiCiacco August 9th
Oops! Forgot to ask about edits for including a “home” link in the header. Is that possible?
( )jon August 11th
arrgh, this is so great yet so frustrating: where do you paste the code? I mean I know the files, but where in style css for example, do you paste the code? I just pasted mine in and everything is out of wack (kubrick theme.) Lots of love to any good samaritans out there…
( )Tim August 24th
Some of the download links dont seem to work namely the css. Has anyone got the files would love to implement this.
( )andi August 27th
Demo doesn’t work in IE
( )kamal September 20th
Nice tutorial and i activated this technique with 100% success but its seems some errors with IE6 and 7.May be we should kill these browsers.
( )Other than that its an awesome tutorial.
Rodney October 1st
lovely tut man. Always a winner. Was just wondering can this menu be modified to look like the iphone or ipod drill down menu? eg. like what is used at http://www.deviantart.com
( )Salim October 24th
Nice work Work Excellent
( )mie2nk October 26th
very nice…..
( )tjodolv November 1st
To be precise, Apple does not use jQuery, but Prototype and Scriptaculous. A “competing” set of libraries that can do pretty much the same as jQuery. jQuery is smaller, though. Whichever you choose is pretty much just a matter of personal preference.
( )Sheeps23 November 19th
http://ui.jquery.com/repository/real-world/accordion-drawers/
copied? great job I guess lol
( )Paris Vega December 10th
Looks like its time for me to start using jQuery. Awesomely simple.
( )Jack FIsher January 13th
very cool little menu
( )Anna February 23rd
This is a good tutorial, Im quite new to wordpress but im hoping to be able to master it, and make it work for me. This tutorial is a good tool to get me started. Thanks for sharing ill be keeping an eye on what you come up with next.
( )Brooke April 29th
How can you use this for just the main navigation instead of your whole sidebar? I’m looking to do a vertical accordian nav on the left sidebar, and keeping the right sidebar intact. That possible?
( )