水平滑块菜单

-1

我在尝试构建一个像图片这样的固定菜单。
我搜索了一些jquery插件，但只有我发现的东西是手风琴或标签菜单，它在垂直方向打开。
我希望实现在水平方向
水平滑块菜单

你有任何的例子此菜单内容与jQuery + CSS像Visual Studio的浮动面板系统的内容？

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

来源

2009-09-07 Myra

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

来源

2009-09-10 07:58:09 Myra

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

把这两个在一起，解决方案就变得非常简单：

我假设你已经创建了一个div（使用id =“菜单”）周围的标签（ID =“menutab”）和内容（标签和内容本身是独立的div）。您可以使用相对定位或简单的CSS float指令来获取您想要的选项卡和内容。一旦它看起来很好，请添加以下代码：


$('#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（）函数，以便它滑入和滑出。但我认为这些东西是对浏览器资源的浪费，因为我长大了做科学编码，所以你必须自己工作一点点）

来源

2009-09-07 12:55:40 sillyMunky

你的想法是合乎逻辑的，但还不够，但我正在寻找一个编码插件，如果存在的话。再次感谢你+1 – Myra 2009-09-08 11:02:31

水平滑块菜单

回答

相关问题