In this tutorial we’ll show you how to create a panel with slide-out content at the top of you page (like the one in this page) using jQuery. It is required that you have basic knowledge in HTML, CSS and jQuery to complete the tutorial.

1. Building the HTML

Here’s the basic structure of the HTML we’ll need for our slide-out panel.

<div id="slider">
   <div class="wrap">
      <div class="slider-top">
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
      </div>
      <div class="slider-bottom">
         <div id="handle">
            <a href="#" id="logo" class="notext left">Logo</a>
            <a href="#" id="slide-link" class="notext left">Our sites <span>&nbsp;</span></a>
         </div>
      </div>
   </div>
</div>

We start out with a div with an ID slider that will stretch to the width of the page, and inside it another div which we’ll use to center the content horizontally. We’ll use a class wrap for that.

<div id="slider">
   <div class="wrap">

   </div>
</div>

Next, we’ll add two more divs which correspond to the top part of the slider, which will be hidden by default, and the bottom part which will be visible at all times and will hold the button which will slide the content.

<div id="slider">
   <div class="wrap">
      <div class="slider-top">

      </div>
      <div class="slider-bottom">

      </div>
   </div>
</div>

Finally, we’ll add the content at the top of the slide-out panel, and the logo and link which activates the sliding – it will be assigned the ID slide-link. In this example, our content will be a few linked images that you can replace with anything you like.

<div id="slider">
   <div class="wrap">
      <div class="slider-top">
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
      </div>
      <div class="slider-bottom">
         <div id="handle">
            <a href="#" id="logo">Logo</a>
            <a href="#" id="slide-link">Our sites <span>&nbsp;</span></a>
         </div>
      </div>
   </div>
</div>

2. Styling our HTML with CSS

This is the stylesheet we’ll be using. There is a step-by-step explanation for it below.

* { padding: 0; margin: 0; outline: 0; }

body {
   font-family: Arial, Helvetica, Sans-serif;
   font-size: 12px;
   color: #fff;
   line-height: 1.2;
   background: #072348 url(images/bg.jpg) no-repeat top center;
}

a { color: #6eb6fd; }
a:hover { text-decoration: none; }
a img { border: 0; }

.left {
   float: left;
   display: inline;
}
.right {
   float: right;
   display: inline;
}

.notext {
   font-size: 0;
   line-height: 0;
   letter-spacing: -4000px;
}

.wrap {
   width: 800px;
   margin: 0 auto;
}

#slider {
   background: #2d2d2e url(images/bg-slider.png) 0 bottom repeat-x;
   width: 100%;
   height: 137px;
   position: absolute;
   top: -80px;
   left: 0;
}

#logo {
   background: url(images/logo.png);
   width: 312px;
   height: 67px;
   position: relative;
}

#handle {
   width: 515px;
   height: 67px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
}
#slide-link {
   background: url(images/our-network-button.gif);
   width: 103px;
   height: 67px;
   text-decoration: none;
   position: relative;
}
#slide-link span {
   background: url(images/network-arrow.gif) 0 -30px no-repeat;
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   top: 35px;
   right: 43px;
}
#slide-link span.open {
   background-position: 0 5px !important;
}

.slider-top {
   height: 60px;
   padding: 10px 0;
}
.slider-top a {
   float: left;
   display: inline;
   margin: 0 10px 0 0;
}

.slider-bottom {
   width: 800px;
   height: 50px;
   position: relative;
}

First up, we’ll set the appropriate background and positioning to the div that holds our slider. We’ll set the width to 100%, height – 137px, and we’ll set an absolute position to the element so it will be easy for us to make it slide out later on. The top position is -80px because that is the height of the part we’ll want to hide. If your hidden area is sized differently you should change the position accordingly.

#slider {
   background: #2d2d2e url(images/bg-slider.png) 0 bottom repeat-x;
   width: 100%;
   height: 137px;
   position: absolute;
   top: -80px;
   left: 0;
}

Next, we’ll style the top (hidden) and bottom (always visible) part of our panel. We’ll also add some basic styling for the linked images in the top hidden part.

.slider-top {
   height: 60px;
   padding: 10px 0;
}
.slider-top a {
   float: left;
   display: inline;
   margin: 0 10px 0 0;
}

.slider-bottom {
   width: 800px;
   height: 50px;
   position: relative;
}

Then we’ll set up our blue handle, which holds the website logo and the link which toggles the sliding content. We’ll set the appropriate dimensions for the left and right divs. Then we’ll apply the style we need for our logo and slide toggle link. Notice how the white arrow which shows the state of the slider is placed in a separate <span> tag – we’ll be adding a class open to that so the arrow state changes when you slide out the content.

#handle {
   width: 515px;
   height: 67px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
}
#slide-link {
   background: url(images/our-network-button.gif);
   width: 103px;
   height: 67px;
   text-decoration: none;
   position: relative;
}
#slide-link span {
   background: url(images/network-arrow.gif) 0 -30px no-repeat;
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   top: 35px;
   right: 43px;
}
#slide-link span.open {
   background-position: 0 5px !important;
}

#logo {
   background: url(images/logo.png);
   width: 312px;
   height: 67px;
   position: relative;
}

3. Using some jQuery magic to animate our slider.

Here’s the source of our functions.js file:

$(document).ready(function() {
   $('#slide-link').click(function() {
      if($(this).find('span').hasClass('open')) {
         $('#slider').animate({
            top : -80
         }, {
            queue : false
         });
         $(this).find('span').removeClass('open');
      } else {
         $('#slider').animate({
            top : 0
         }, {
            queue : false
         });
         $(this).find('span').addClass('open');
      }
      return false;
   });
});

As most of you probably know, the first thing we need to write in our functions file is the following:

$(document).ready(function() {

});

Next up, we select our slide-link by its ID, and add a .click() event handler, so the .animate() function will be executed when we click it.

$(document).ready(function() {
    $('#slide-link').click(function() {

    });
});

After that, we’ll let jQuery check whether or not the span tag inside our slide-link has a class called open – that way we’ll determine if the panel should be sliding up or down. We’ll also add return false; at the end of the function, so the link won’t take us to the page it has set in its href tag.

$(document).ready(function() {
    $('#slide-link').click(function() {
        if($(this).find('span').hasClass('open')) {

        } else {

        }
        return false;
    });
});

Finally, we’ll animate the slider div. If our panel is hidden, we’ll set the position in the animate function to top : 0 and we’ll add the open class to the span element in our slide-link. Otherwise, the animate position should be the negative of the height of our hidden panel – in our case – 80px, or simply top : -80 in the jQuery implementation; we’ll also remove the open class we added to our slide-link span before, so the white arrow will return to its default state. In the callbacks of both .animate() functions we added queue : false to prevent jQuery from queuing a lot of animations when a user clicks the slide-link repeatedly without waiting for the animation to finish.

$(document).ready(function() {
    $('#slide-link').click(function() {
        if($(this).find('span').hasClass('open')) {
            $('#slider').animate({
                top : -80
            }, {
                queue : false
            });
            $(this).find('span').removeClass('open');
        } else {
            $('#slider').animate({
                top : 0
            }, {
                queue : false
            });
            $(this).find('span').addClass('open');
        }
        return false;
    });
});

Wasn’t that easy?

Below you’ll find the source files for the slider, and a live demo.