-3

右にスライドしてより多くのコンテンツを表示する垂直ナビゲーション バーの作成についてサポートが必要です。ここの青いバーに似たものを目指しています: http://www.teehanlax.com/labs/ . サイド ナビゲーション バーをクリックするとナビゲーション バーが外側 (右) にスライドし、xボタンをクリックすると後方 (左) にスライドします。

私のコードは次のとおりです。

<!--Am I implementing the jQuery right?-->
<!DOCTYPE HTML> <html> <head> <title>Nishad</title> 
<link rel="stylesheet" href="style.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> 

$(function() { $('#nav').click(function() 
{ var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px'; $(this).animate({ 'margin-left' : leftMargin }, 500); 
}); 
}); ​ 
</head> <body> <div id="wrapper">
<div id="nav"></div> 
<div id="content"></div> 
</div> </body> </html>
4

1 に答える 1

3

要素を調べると、Webサイトがナビゲーションのに負の値を使用していることがわかりますmargin-left。をクリックする+と、に設定margin-leftされ0pxます。

クリックイベントハンドラーをアタッチすることで、クリック効果を得ることができます。スライド効果は、jQueryのを使用して実行できますanimate()。以下は私が今述べた例です。

$(function() {

  $('#nav').click(function() {
  
  var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px';
                 
  $(this).animate({ 'margin-left' : leftMargin }, 500);
   
  });
   
});
    #wrapper {
        white-space: nowrap;
    }
    #nav, #content {
        height: 500px;
        display: inline-block;
    }
    #nav {
        width: 200px;
        margin-left: -150px;
        cursor: pointer;
        background: lightgreen;
    }
    #content {
        width: 500px;
        background: lightblue;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
        <div id="nav"></div><div id="content"></div>
    </div>

jsFiddleデモ

于 2012-08-13T01:30:25.467 に答える