0

jquery を使用してサイドバーを移動 (スライド) すると、ナビゲーション メニューが上に移動し、コンテンツが左に移動するようにしたいですか? Web ページの構造を作成し、jquery を使用してナビゲーションとサイドバーをスライドさせていますが、コンテンツとフッターはそのまま残り、削除された部分は空です。

<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>
4

1 に答える 1

0

アニメーションが完了したときに呼び出される関数を、slideToggle に渡すことができます。そこでは、好きなようにコンテンツを操作できます。

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

または、コンテンツを同時に成長させることもできます。

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

これでうまくいかない場合は、コンテンツの "float" パラメータを試してみてください。

于 2013-01-14T14:59:50.287 に答える