how to make a navigation such as this

Question

I stumbled upon this site http://nathanborror.com/ and really loved the way they have done the navigation on the left hand site. I noticed that site is using jquery but didnt see any plugins.

Any ideas on how to go about doing this?

Answer 1

It's probably pretty easy to find out by looking at their source code. If you want to see what's running, use Firebug.

Answer 2

They have it within the bootstrap.js file, essentially it's simple jQuery.hover() with a jQuery.animate() nested.

Answer 3

Hi,

First, set your menu to use "top","left" and "position" css atributes, so it always stick to the left. Then, use jquery to do the animations on hover, like this :

$('#menu .item').hover(
      function () {
        $(this).animate({width:'toggle'},350); // end value
      }, 
      function () {
        $(this).animate({width:'toggle'},100); // start value
      }
);