jQuery & Navigation: sliding sub navs

We’ve all seen those web sites that have navigation links that, when clicked, slide down a sub navigation. I recently put one together for thatwasmean.com and thought I would take a moment to clean up, generalize, and make easily viewable an example. You can find the working example in my examples directory, here.

To make this functionality possible I utilized jQuery’s slideUp and slideDown functionality. This is a neat little function that changes the display property from displaying the full element to slowly hiding the top part of it until the whole element is hidden, at which point the display CSS attribute is set to none.

I am going to put the main parts of the example here in this point, but keep in mind you will have to set up the remaining html tags (like body and head) as well as include the jQuery framework. It is encouraged to view the working example to see some of the added styling to make things look a little prettier (since in this post scope I am only including the necessities)

Let’s begin with the CSS styles to set things up. We have three sub navigation items and so we need to set those three sub nav items with a display property set to none. You will also note I have modified text alignment in here, since each sub nav requires different aligning. The ‘flash_about’ is the container for the navigation as well as the sub navigation items. This is easy to change if you wish, but I stuck it all in one place as it suited my needs.

#flash_about {
  text-align:right;
}
.sub_nav_box {
  font-weight: normal;
  padding:0.3em 1em 1em;
  border-top:1px dotted #C1CDCD;
}
#add_new_thing {
  display: none;
  text-align: left;
}
#about {
  display: none;
  text-align: left;
}
 
#browse_by {
  display: none;
  text-align: center;
}
#browse_by > .link {
  margin-left: 0.2em;
}
.nav_link {
  margin-left: 1em;
}

Next we need our JavaScript… using the jQuery functions mentioned above and a little jQuery helper magic we have a toggle_div function that takes a div ID and will toggle that div. This function is cool in the sense that it will hide all other opened sub nav items and only show the one you are selecting. Further, if you click a navigation link and its corresponding sub navigation item is already being displayed then the function will slide up that sub navigation item. (The $ symbol represents a call to jQuery.)

function toggle_div(div_id) {
  var div = $('#'+div_id);
  var divs = $('#flash_about').children('div').not(div);
 
  if(div.css('display') == 'none')
  {
    divs.slideUp(function() {
      div.slideDown();
    });
  }
  else
  {
    div.slideUp();
  }
}

Lastly, let’s get the HTML in here to make all of this mean something to the viewer. I have left some content in the sub navigation items to give the overall example some meaning. (I strongly dislike examples where everything is named ‘example 1, example 2, examples 3– show me some content good sir!)

<div id="flash_about">
 
  <a class="nav_link" onclick="return toggle_div('about');" href="#">About</a>
  <a class="nav_link" onclick="return toggle_div('browse_by');" href="#">Categories</a>
  <a class="nav_link" onclick="return toggle_div('add_new_thing');" href="#">Submit something</a>
<div id="add_new_thing" class="sub_nav_box">
<div style="margin-bottom: 0.4em; margin-top: 0.4em;">
      <span id="add_new_thing_title" style="color: #333; font-size: 16px;">Type your thing here... </span></div>
<textarea id="add_new_thing_body" class="thing_input" style="border: 2px solid #666;" cols="40" rows="10"></textarea>
<div id="new_thing_buttons">
      <a class="button" href="#">add new thing</a> or <a onclick="toggle_div('add_new_thing');" href="#">cancel</a></div>
</div>
<div id="about" class="sub_nav_box">
    Welcome to my web site. This is the about us... it is awesome. Feel free to browse the site and check out some of our cool features.</div>
<div id="browse_by" class="sub_nav_box">
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
 
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a>
    <a class="link" href="#">link</a></div>
</div>

And there we have it. Go check out the example to see it in action. I hope you enjoyed this post. If you have any requests on JavaScript/jQuery examples let me know… As I find more time I will put up more examples of common uses of JS & jQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *