水平滑块菜单

可以有页外内容。W3C规范说定位时允许负数(这在Firefox上有效,不确定是否存在无效的Explorer)。

将这两者结合起来,解决方案变得非常简单:

我假设您已经在选项卡(id='menutab')和内容(选项卡和内容本身是独立的div)周围创建了一个div(id='menu')。您可以使用相对定位或简单的CSS浮点指令来获取所需的选项卡和内容。一旦看起来不错,请添加以下代码:

$('#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});
  }
});

我假设默认情况下菜单处于打开状态。状态由与菜单选项卡(in/out)关联的类维护。只需在菜单的选项卡上附加一个click回调函数,这个回调函数就可以使用分配给它的类来检查菜单是在里面还是在外面。如果它在外面,左边的位置被设置为减去内容的宽度,如果它在左边的位置被设置为页面的边缘。

我找到了我需要的东西, JQuery插件 Tab-Slide-Out