スライドメニューを背景から左へ

------------- 
    | header | 
    ------------ 
    | |  | 
    | L|content | 
    | |  | 
    ------------- 

    ------------- 
    | header | 
---------------- 
| <- |   | 
| L |content | 
| <- |   | 
-----------------

250ピクセル幅と300ピクセルの高さのJQueryボックスを作成する必要があります。それは、（1）ヘッダー（2）スライド左区（メニューを表示する）をトグルし、クリックの元の位置に戻るべき小さなバーと、（3）コンテンツの右側部分からなる。私はJQueryでかなり新しく、Chromeで多かれ少なかれ動作するコードを考えることができますが、IEでは劇的に失敗します。スライドメニューを背景から左へ

<html> 
<head> 
    <script src="jquery[1].js" type="text/JavaScript"></script> 
    <style type="text/css"> 
     #gcontainer { 
      height:300px; 
      width:350px; 
      background-color:#ffffff; 
      margin-left:100px; 

     } 

     #gheader{ 
      height:50px; 
      width:350px; 
      background-color:#feee00; 

     } 

     #gtray{ 
      height:250px; 
      background-color:#006600; 
      width:130px; 
      float:left; 
      margin-left:0px; 
      margin-right:0px; 
      position:relative; 
      z-index:0; 
      overflow:hidden: 
     } 

     #gcontainer{ 
      height:250px; 
      width:320px; 
      margin-left:30px; 
      background-color:darkblue; 
      float:left; 
      position:absolute; 
     } 
    </style> 

    <script type="text/JavaScript"> 
    $(function(){ 
     $('#gtray').toggle(
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'-100px'},'slow'); 
      }, 
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'0px'},'slow'); 
      }); 
    }); 
    </script> 
</head> 
<body> 


<div id="gcontainer"> 
    <div id="gheader"><h2>HEADER</h2></div> 
    <div id="gtray"> 
     <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span> 
     <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span> 
    </div> 
    <div id="gcontainer"></div> 
</div> 

</body> 
</html>

をお勧めします。

出典

2011-11-21 helloworld

ここでの問題は、javascript/jqueryではなく、HTML/CSSにあるようです。まず、同じIDを持つ複数のdivを持つべきではありません。だからなぜあなたは#gcontainerを2回持っているのか分かりません。複数のdivに同じスタイルを適用する場合は、クラスを使用します。あなたのCSSでは、#gcontainerを2回スタイリングしています。これは、2回目が最初のものを上書きするので意味がありません。また、常にページの上部に<!DOCTYPE html>を追加することを忘れないでください。そうしないと、さまざまな予期せぬ事柄を実行することができます。

とにかく、あなたのHTMLとCSSで余分な#gcontainerを削除し、いくつかの余白を編集しました。最後に、全体にラッパーを追加し、左に余白を入れて、スライドが画面から外れないようにしました。これはIEとChromeで動作するはずです：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/JavaScript"></script> 
    <style type="text/css"> 
     #wrapper { 
     margin-left: 100px; 
     } 

     #gheader{ 
      height:50px; 
      width:350px; 
      background-color:#feee00; 

     } 

     #gtray{ 
      height:250px; 
      background-color:#006600; 
      width:130px; 
      float:left; 
      margin-left:0px; 
      margin-right:-130px; 
      position:relative; 
      z-index:0; 
      overflow:hidden; 
     } 

     #gcontainer{ 
      height:250px; 
      width:320px; 
      margin-left:30px; 
      background-color:darkblue; 
      float:left; 
      position:absolute; 
     } 
    </style> 

    <script type="text/JavaScript"> 
    $(function(){ 
     $('#gtray').toggle(
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'-100px'},'slow'); 
      }, 
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'0px'},'slow'); 
      }); 
    }); 
    </script> 
</head> 
<body> 

<div id="wrapper"> 
    <div id="gheader"><h2>HEADER</h2></div> 
    <div id="gtray"> 
     <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span> 
     <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span> 
    </div> 
    <div id="gcontainer"></div> 
</div> 
</body> 
</html>

出典

2011-11-21 10:11:31

こんにちはSanketh ...ありがとうございます。 IEとクロムの両方でうまくいっています。しかし、スライダートレイが左にスクロールしているときは、スライドバーの幅が少し変わって「開く」が1秒間切れることがわかります。この問題は、きちんとした＆きちんとしたアニメーションにならないため、どのように解決できますか？ありがとう。 – helloworld

スライドの速度を遅くすると（「slow」を数msに変更してください）、少し滑らかに見えます。テキストが途切れることを心配しているだけなら、いつでもOpenの周りにパディングを追加することができます。それ以外にも、[jQuery Easing Plugin]（http://gsgd.co.uk/sandbox/jquery/easing/）や[jQuery UIのエフェクト]（http：// jqueryui .com/docs/effect /）で、滑らかさのためのオプションがいくつか追加されています。うまくいけばそれらの助け –

スライドメニューを背景から左へ

答えて

関連する問題