如何製作相互依賴的html結構？

希望導航菜單向上移動&使用jquery移動側欄（幻燈片）時，內容向左移動？我正在爲我的網頁和使用jquery滑動導航&邊欄，但內容&頁腳仍然是它的位置和被刪除的部分是空的，所以如何使它相互依存？如何製作相互依賴的html結構？

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 
$("#slidesidebar").click(function(){ 
    $("#sidebar").slideToggle("slow"); 
    }); 
}); 
</script> 

<style type="text/css"> 
nav { 
    position: fixed; 
    left:15%; 
    top: 0; 
    width: 100%; 
    height: 6%; 
    background: #555; 
    } 

    #content { 
    position: relative; 
    top:auto; 
    width:85%; 
    top:6%; 
    margin: 0 0 auto auto; 
    background:black; 
    } 

    #main { 
    } 

    #sidebar{ 
    position: fixed; 
    left:0; 
    width:15%; 
    color: white; 
    background:green; 
    } 

    footer { 
    width: 100%; 
    position: fixed; 
    opacity:0.8; 
    bottom: 0; 
    height:5%; 
    left:0; 
    background:red; 
    } 
</style> 
</head> 

<body> 

<div id="sidebar"> 
Sidebar Content 
Sidebar Content 
</div> 

<nav> 
Navigation Menu 
</nav> 

    <div id="content"> 
     <div id="main" align="center"> 
Content 
</div> 


     <footer> 
<button style="font-size: .8em;" id="slidesidebar">Flip Side-Search</button> 
     Footer 
     </footer> 

</div>  
    </body> 
    </html>

來源

2013-01-14 Sarthak

你可以重寫你的問題原因在這一刻，它是不可能瞭解它嗎？ – Kamo

編輯了上面的問題！ – Sarthak

您可以將一個函數傳遞給slideToggle以在動畫完成時調用。在那裏你可以操縱你喜歡的內容。

$("#sidebar").slideToggle("slow", function(){ 
$("#content").css({width:"100%", float:"left"}); 
});

或者你可以有內容增長的同時：

$(document).ready(function(){ 
$("#slidesidebar").click(function(){ 
    $("#sidebar").slideToggle("slow"); 
    $("#content").animate({width:"100%"}); 
    }); 
});

如果不這樣做的伎倆，試圖用內容的「浮動」參數播放。

來源

2013-01-14 14:59:50 Asymmetric33

如何製作相互依賴的html結構？

回答

相關問題