javascript滑动（侧面）面板

以下是动态驱动器的一个很好的“下拉面板”。 http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

正如你所看到的，它是一个面板，在“自上而下”的方向打开时，推动“正文”的内容。
我想知道是否有可能改变它的代码，以便使用“左右”或“左右”方向的滑动（侧面）面板在打开时推动“正文”内容？

由于事先javascript滑动（侧面）面板

来源

2013-05-20 light-blue

它应该是可行的，但不知道它会制定出很好的为你想。您的选择或者是将主要内容推到可见空间之外（剪切它的一部分）并保持其宽度或减小宽度以便为侧栏腾出空间（这将重新填充所有内容，从而导致移动和诸如此类的东西）。 –

我不会建议使用该插件做你想做的achieve-如果我理解正确的话，你想要的效果是什么，可以合理地使用简单jQuery和绝对定位在构建自己CSS ..的元件包含将使用此作为参考

.hidden { 
    width:50px; 
    height:300px; 
    background:pink; 
    position:absolute; 
    left:0;z-index:10; 
}

然后这元件绝对0定位到

<div class="container"> 
    <a href="#2" class="toggle">toggle</a> 
    <div class="hidden"> 
    </div> 
    <div class="body"> 
    </div> 
</div> 


.container {position:relative; }

位置相对装置我们的引用元素的左边，并带有z-index，以确保它在扩展时出现在body元素之上。

.body {width:500px; height:300px; background:grey; float:left;}

最后，你需要在你的页面上包含jQuery，并使用类似下面的函数。

$('.toggle').click(function(){ 
    if (open != true){ 
     $(".hidden").animate({width:'300px'}, 500); 
     open = true; 
    } 
    else 
    { 
     $(".hidden").animate({width:'50px'}, 500); 
     open = false; 
    } 
    return false; 
});

这将选择你的a.toggle元素，并设置一个点击事件。当第一次火灾时，open将不会被定义，所以不会（!=）为真。然后，我们可以将宽度设置为（api.jquery.com/animate/）超过500毫秒，并在此函数范围内声明我们的open变量为true。下一次我们触发此特定功能的点击事件时，} else {之后的第二部分将会触发。

您可以尝试在http://jsfiddle.net/DcWS2/上进行演示。如果这不是你想要的，那么我很乐意进一步提供帮助。

编辑

A到你的问题更完整的解决方案可能看起来像（http://jsfiddle.net/DcWS2/3/）

$('.hidden').hover(function(){ 
    $(".hidden").stop().animate({width:'200px'}, 500); 
    $(".body").stop().animate({marginLeft:'200px'}, 500); 
},function(){ 
    $(".hidden").stop().animate({width:'30px'}, 500); 
    $(".body").stop().animate({marginLeft:'30px'}, 500); 
});

来源

2013-05-20 22:29:21 happilyUnStuck

再次阅读您的问题，您所描述的确切效果可以作为Foundation 3（http://zurb.com/playground/off-canvas-layouts）的一部分找到。答案是一个简化的实现，因为看起来你正在学习。你可以通过修改上面的函数来包含'$（'。body'）。animate（{left：300px}，500）'来进一步在固定宽度的布局上模仿这个功能;'这将是一个很好的练习来巩固你的理解。 – happilyUnStuck

@Stano很好！ +1 .stop（），重写您的保证金代码以串联使用宽度。在主要部分添加文本时，它看起来非常聪明。 http://jsfiddle.net/DcWS2/3/ – happilyUnStuck

@happilyUnStuck感谢您的有用答案，代码和评论，他们很棒，但是我想使用比使用JQuery更简单的JavaScript，因为我有很多问题使用JQuery时使用Internet Explorer（版本7,8和9），有时结果与FireFox，Chrome和Opera中可能会看到的结果完全不同。 –

不知道你究竟是如何与动态驾驶做到这一点，但你可以用jQuery show/hide做到这一点很容易：

HTML：

<div id="helpPanel"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div> 
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a> 
<div class="normal"> 
    Maecenas ultrices feugiat nibh sit amet mattis. Nullam et sapien id turpis tempus tincidunt non ac sapien. 
</div>

CSS：

#helpPanel { border: 1px solid red; overflow: auto; display: none; } 
.normal { margin-top: 15px; border: 1px solid blue; }

的JavaScript：

var state = true; 
var $panel = $("#helpPanel"); 
$("#button").on("click" ,function() { 
    if (state) { 
     $panel.show(1000); 
    } else { 
     $panel.hide(1000); 
    } 
    state = !state; 
});

Working Demo

来源

2013-05-20 23:32:59

Andreas Josas，感谢您的文章，这是一个很棒的滑动菜单，不过，我需要一些侧面板，它可以水平打开**，也可以不需要** **使用_“JQuery”_，（因为在使用JQuery时，我在浏览器中遇到了很多问题）。 –

javascript滑动（侧面）面板

回答

相关问题