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.

Show/Hide ToolTips with jQuery (revisited)

Finally, I got around to putting together a very simple demonstration (no graphics or styling) of using jQuery to show and hide (toggle) tool tips. I have put together I demo you can access at examples/jquery/show_hide_tooltips_ex1. Ctrl+U to view source.

What I have put together in this demonstration:

  • an on ready document function that tells jQuery when the web page has rendered to become active
  • a binded click event on all input boxes with a class named ‘form_field’ that will call back a function when clicked
  • a call back function that will hide all other tooltips and display the one corresponding to the input box clicked

Here is the source code to view. Again, to see it functioning go to the above link! And don’t forget for all of this to function you must include the jQuery JavaScript framework into your <head></head> html page. You can link or grab a copy from Google Code (here), and the version I am using is jquery-1.3.2.min.js.

$('.form_field').bind("click",
    function()
    {
      var divs = $('.tooltip_example1');
      var field = this.id;
      var div = $('.tooltip_example1[id='+field+']');
 
      if(div.css('display') == 'none')
      {
        divs.hide(function()
        {
          div.show();
        });
      }
      else
      {
        div.hide();
      }
    });
  });

And within the body of your html page you should add the following html

<table border="0">
<tbody>
<tr>
<td>
          Username</td>
<td>
<input id="username" class="form_field" size="30" type="text" /></td>
<td>
<div id="username" class="tooltip_example1" style="display:none">
          This is how we'll identify you</div></td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="password" class="form_field" size="30" type="text" /></td>
<td>
<div id="password" class="tooltip_example1" style="display:none">
           And how you keep it safe</div></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Submit" /></td>
</tr>
</tbody></table>

The value in this kind of toggling is as a user goes through a form they can see suggested messages by you, the web developer.