Sexy Illustrative Sliding Header With jQuery

You’ve probably seen those sites, just like this one, with the very large stylized headers. While they do look good, they also cut into valuable screen real estate. So how do we keep a good balance between your site looking good & having a functional layout? You don’t. You add an option to hide that sexy big header.

This tutorial was a request, and while it is quite near another tutorial I did, I feel it was different enough to warrant making a tutorial.

Adding It To Your Design

As I’ve always said, I am not good at design. However, you will need to figure out somewhere in your header to place a element of some form to use as button. Whether this is an arrow, a tag or something will depend entirely on your design. Here, as an example, is what we would have here on Return True if we added this feature.

As you can see we have added a tab which will be used to add the jQuery click event onto. One other thing to remember is the part of the header that is shown after the header has been shrunk. It has to look sensible without the rest of the header.

Constructing The HTML

How you construct the HTML will be very different depending upon your design. However you do need to remember that the thing you want to click must be a separate element. You might be able to get away with using an image map, but I’d try to go for a separate element with the image inside. Also remember to give it a unique ID for jQuery to find.

Sliding With jQuery

The jQuery is fairly simple really. Let’s take a look at it:

Okay. Now we’ll go through the code a little.

First off is the standard document ready. I’ve used the no conflict version, I tend to automatically use the no conflict call as I’m normally coding for WordPress.

Then we set a variable called flag to true. This variable is used to allow us to create a toggle effect. Next we attach a click event to our button, remember to change #button to the ID of your button element. Next we check if our flag is true. If so we target the element with our header in, and tell it to shrink it to the size we want for the small header. We also use the callback feature of animate to set our flag variable to false.

In the else section of our if statement we do exactly the opposite. Increase the height of the header & set our flag to true in the callback.

You will need to customize the heights obviously, they are just the ones I used for the example shown later in this post. You may want to change the speed of the animation too, that is the second number (it’s in milliseconds).

Why Not Use Toggle?

Well I did. However it seemed to be a little to buggy. If you wailed on the button (hit it lot’s of times) it would cause some strange stuff to happen. I found it worked better to make my own toggle system using the flag variable & use stop(true, true) to cancel out any built up FX queues.

I Want An Example!

Look no further. Take a look at this example of a sexy illustrative sliding header.

Due to my header having text & the way the background is positioned, you may notice (by looking at the source) the example pages code is slightly different. The code I’ve given here covers the basic header, feel free to get creative.

I hope this tutorial helped you. If you have any questions or problems let me know in the comments. Also I know I keep saying it, but the server bill is due soon & we are a little short. Anything you can donate, even pennies/cents, would be a massive help.

HeaderjQuerySlide