What is the best way to show and hide nav elements with a slider animation?

Question

Ok I have a fixed nav side bar that I have three icons. When an icon is clicked a div (hidden with a negative margin) will slide out. When the button is clicked again the displayed div will hide (via slide animation). This action will be repeated for the other two icons.

I realize there are many different ways to execute this, and there is a lot of supporting documentation out there with varying opinions. I have tried declaring the action via .click with .animate({"left": "+=56px"},"slow") & I have also wrote functions to fire onclick. What I'm realizing is that I can easily make this simple task far more complex than it needs to be.

Any suggestions of the cleanest way to execute this?

Edit: Thanks everyone for their input. Toggle, while it is minimalist in nature doesn't go from left to right. The script I ended up using was:

   <?// Toolbar ?>
   <div id="toolbar">

      <img src="images/balihooGreyLogo.png" class="logo"/>

      <a href="#" class="textIcon" title="Edit Copy"><img src="images/textIcon.png" border="0"/></a>

      <a href="#" class="locationIcon"><img src="images/locationIcon.png"  border="0"/></a>

      <a href="#" class="mediaIcon"><img src="images/mediaIcon.png"  border="0"/></a>

      <a href="#" class="save">SAVE</a>

      <a href="#" class="export">EXPORT</a>

   </div>




  <?// Text Input Slideout Box?>
   <div class="textInput">
      <h1>Email Copy</h1>

   </div>
<script>
 $('.textIcon').click(function () {
    $('.textInput').slideToggleWidth();
});

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      $(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      $(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = $(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});
</script>

Check out `.toggle()` with `slide` as the effect. http://jqueryui.com/demos/toggle/ — MetalFrog, Mar 26 '12 at 19:15
Or try http://api.jquery.com/slideToggle/ which doesn't include the overhead of jQuery UI. — j08691, Mar 26 '12 at 19:20
Agreed w/ the toggle here since it does the animated show and hide for you. — nolabel, Mar 26 '12 at 19:54
@j08691 I agree that toggle is clean and functions great, but is there a way that I'm unaware of to have is go left to right? — Scott Sword, Mar 26 '12 at 20:26

score 0 · Answer 1 · answered Mar 26 '12 at 19:49

That seems to be the simplest way to do it. I am assuming your hiding them with negative text for accessibility reasons (versus display: none;). The only suggestion I could make for cleaning it up, if you are not already doing it, would be to write one function that works for all buttons.

$('.icon').click(function() {
       $(this).next('.nav-item').animate({"left":"+=56px"},"slow");
)};

Another thing you might want to look at is some advances in hiding items you want read by screen readers is using this code: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility (Again assuming that is why u are hiding it with a negative ident):

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Probably over answering the question, but thought I would mention it.

What is the best way to show and hide nav elements with a slider animation?

1 Answers1