Question

我正在尝试建立像图像一样的固定菜单我搜索过一些jquery插件，但我发现只有手风琴或标签菜单才能在垂直方向打开。
我想用jquery + css实现这个菜单内容，就像Visual Studio的浮动面板系统一样，内容在水平方向上

你有任何例子吗？

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

Answer 1

可以有页外内容。 W3C规范说定位中允许使用负数（这适用于Firefox，不确定无效资源管理器）。

将这两者放在一起，解决方案变得非常简单：

我假设你已经创建了一个div（带有id ='menu'）围绕标签（id ='menutab'）和内容（标签和内容本身就是单独的div）。您可以使用相对定位或简单的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（）函数，以便它可以滑入和滑出。但我认为这些东西浪费了浏览器资源，因为我从小就开始进行科学编码，所以你必须自己努力工作;）

Answer 2

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

水平滑块菜单

2 个答案: