Horizontal slider menu

Answer 1

It is possible to have off-page content. W3C spec says negative numbers are allowed in positioning (this works on Firefox, not sure about Invalid Explorer ).

Put these two together and the solution becomes very simple:

I'm assuming you've already created a div (with id='menu') surrounding the tab (id='menutab') and content (tab and content are themselves seperate divs). You can either use relative positioning or simple CSS float directives to get the tab and contents where you want them. Once it looks fine, add in the following code:

$('#menutab').addClass('in');
var contentWidth = $('#content').width();

$('#menutab').click(function(){
  if( $(this).is('.out') ){
    $(this).removeClass('out').addClass('in');
    $('#menu').css({left: '-'+contentWidth});
  }
  if( $(this).is('.in') ){
    $(this).removeClass('in').addClass('out');
    $('#menu').css({left: 0});
  }
});

I've assumed the menu is in by default. The state is maintained by the class associated with the menu tab (in/out). Simply attach a click callback function to the menu's tab, this callback function checks whether the menu is in or out using the classes assigned to it. If it's out the left position is set to minus the width of the content, if it's in the left position is set to the edge of the page.

If you want to be really snazzy you can use jquery's .animate() function so that it slides in and out. But I think of those things as a waste of browser resources because I grew up doing scientific coding, so you'll have to work that bit out yourself ;)

Answer 2

I found exactly what I need, JQuery plug-in Tab-Slide-Out