First of all, thanks for sharing Karl, it’s a very valuable ressource for jquery beginners.

I’m looking for the same setup as Doug, any idea how to implement that ?

cheers

BUT, I only have a 1 row menu.

You can see it here : http://www.prohockeylife.com/media

Hop this help!
Phet

Let’s say I have a centered page and I want to use this menu on the right-hand side so that the items slide in over the content (pretty much as per your example).

The positioning of the containers means that any hyperlink in the content can’t be clicked – even all the containers of the nav have a transparent background.

Anyone know of a solution to this?

Thanks!

CSS:

<style type="text/css">
html, body {
margin: 0;
padding: 0;
border-width: 0;
}
body {
font: 14px/1.4 Helvetica, Verdana, Arial, sans-serif;
text-align: center;
}

.container-menu {
width: 800px;
margin: 40px auto;
text-align: left;
background-color:#F00;
}

/*THE MENU*/
/*Container for the menu*/
.tab-nav {
width: 800px;
overflow: hidden; /*The wrapper's overflow declaration is significant, as it hides the list items when they're sticking out to the right, but the rest is "window dressing."*/
background: #ccc url(tab-slide.png) no-repeat 0 0;
}
/*Tab-background*/
.tab-nav ul {
position: relative;
float: right;
width: 1600px;
margin-right: 725px;
padding-right: 0;
list-style-type: none;
background:#0F0/*GREEN*/;
}
/*Menu item list*/
.tab-nav li {
float: right;
clear: right;
}

/*HANGING TAB*/
/*Style for the hanging tab, when close menu*/
.tab-nav a {
display: block;
width: 74px;
border-right: 1px solid #ddd;
height: 50px;
line-height: 49px;
float: right;
text-align: center;
text-decoration: none;
color: #F0F/*PINK*/;
background: #06F url(tab-slide.png) no-repeat 2px -180px;
}
/*Style for the hanging tab, when open menu*/
.tab-nav a.expanded {
background-position: 2px -230px;
}

/*Second level menu style (part of the menu that is hidden when closed*/
.tab-nav ul ul { float: right; background-color: #333; width: auto; margin-right: 0;}
.tab-nav li li { clear: none;}
.tab-nav li li a { color: #fff; width: 100px; background-image: none;}
</style>

Javasript:

$(document).ready(function() {
  $('#tab-nav-1 > ul > li > a').click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;

    if (parseInt($parentItem.css('marginRight'), 10) < 0) {
      direction = '+=';
      $(this).removeClass('expanded');
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
      .animate({marginRight: direction + slideAmt}, 400);
    return false;
  });

});

$(document).ready(function() {
  var $topLinks2 = $('#tab-nav-2 > ul > li > a');
  $topLinks2.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
    $topLinks2.removeClass('expanded');
    if (parseInt($parentItem.css('marginRight'), 10) < 0) {
      direction = '+=';
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
      .animate({marginRight: direction + slideAmt}, 400)
        .siblings()
        .animate({marginRight: '0'}, 150);
    return false;
  });
});

$(document).ready(function() {
  var closeAll,
      $topLinks3 = $('#tab-nav-3 > ul > li > a');

  $('#tab-nav-3 ul ul').css('opacity', '0.5');

  setTabIndex();

  $topLinks3.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
    $topLinks3.removeClass('expanded');
    if (parseInt($parentItem.css('marginRight'), 10) < 0) {
      direction = '+=';
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
    .animate({marginRight: direction + slideAmt}, 400)
      .siblings()
      .animate({marginRight: '0'}, 150);

    setTabIndex();

    return false;
  });

  $('#tab-nav-3')
  .mouseleave(function() {
    closeAll = setTimeout(function() {
      $topLinks3.removeClass('expanded').parent().animate({marginRight: '0'}, 150);
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

  function setTabIndex() {
    $topLinks3.each(function(index) {
      if ($(this).is('.expanded')) {
        $(this).next().find('a').removeAttr('tabIndex');
      } else {
        $(this).next().find('a').attr({tabIndex: '-1'});
      }
    });
  }

});