水平滑块菜单答案

【问题标题】：Horizontal slider menu水平滑块菜单
【发布时间】：2009-09-07 09:28:17
【问题描述】：

我正在尝试构建一个像图像一样的固定菜单。
我搜索了一些 jquery 插件，但我发现的只有手风琴或标签菜单，它在垂直方向打开。
我希望用 jquery + css 来实现这个菜单内容，比如 Visual Studio 的浮动面板系统，内容在水平方向

你有什么例子吗？

content http://img233.imageshack.us/img233/859/menuij.png

【问题讨论】：

标签： jquery html css jquery-ui

【解决方案1】：

可能有页外内容。 W3C 规范说在定位中允许负数（这适用于 Firefox，不确定 Invalid 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});
  }
});

我假设菜单是默认的。状态由与菜单选项卡（输入/输出）关联的类维护。只需将单击回调函数附加到菜单的选项卡，此回调函数使用分配给它的类检查菜单是否进入或退出。如果在左边位置设置为减去内容的宽度，如果在左边位置设置为页面边缘。

如果你想变得非常时髦，你可以使用 jquery 的 .animate() 函数，让它滑入和滑出。但我认为这些东西是对浏览器资源的浪费，因为我从小就从事科学编码，所以你必须自己解决这个问题；）

【讨论】：

你的想法是合乎逻辑的但还不够，但我正在寻找一个编码插件如果存在..再次感谢+1

【解决方案2】：

我找到了我需要的东西， jQuery插件 Tab-Slide-Out

【讨论】：