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滑動（側面）面板

回答

相關問題