「CSS+jqueryでメインとメニュー切替え」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

CSS+jqueryでメインとメニュー切替え

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  6. <title>CSS+jqueryでメインとメニュー切替え</title>
  7. <script type="text/javascript" href="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  8. <style type="text/css">
  9.   html,body {
  10.     width: 100%;
  11.     height: 100%;
  12.     margin: 0;
  13.     padding: 0;
  14.   }
  15.   
  16.   body {
  17.     word-wrap:break-word;
  18.   }
  19.   
  20.   #wrap {
  21.     position: relative;
  22.     top: 0;
  23.     left: 0;
  24.     height: auto;
  25.     min-height:100%;
  26.     overflow: scroll;
  27.     overflow-x: hidden;
  28.     overflow-y: auto;
  29.     
  30.     background-color: red;
  31.   }
  32.   #mWrap {
  33.     position: absolute;
  34.     top: 0;
  35.     left: 0;
  36.     width:100%;
  37.     height: auto;
  38.     min-height:100%;
  39.     
  40.     background-color: green;
  41.   }
  42.   #sWrap {
  43.     position: absolute;
  44.     top: 0;
  45.     left: 100%;
  46.     width:100%;
  47.     height: auto;
  48.     min-height:100%;
  49.     
  50.     background-color: gray;
  51.   }
  52. </style>
  54. </head>
  55. <body>
  56. <div id="wrap">
  57.   <div id="mWrap">
  58.     <div style="text-align:right"><a href="#" onClick="menuOpen(); return false;" style="color:#fff; font-size:1.2em; font-weight: bold;">メニュー開く</a></div>
  59.     <div style="padding: 3em 0.2em;">
  60.       <h1>CSS+jqueryでメインとメニュー切替え</h1>
  61.       <p style="font-size:1.2em;font-weight:bold">画面の右上の「メニュー開く」をクリック</p>
  62.       <p>
  63.         メインコンテンツ部<br />
  64.         わかりやすいように背景を緑にしています<br />
  65.         ※確認のために親要素の背景を赤にしています<br />
  66.       </p>
  67.     </div>
  68.     <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  69.     <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  70.     <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  71.     </div>
  72.     <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  73.     Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  74.     </div>
  75.   </div>
  76.   
  77.   <div id="sWrap">
  78.     <div style="text-align:right"><a href="#" onClick="menuClose(); return false;" style="color:#fff; font-size:1.2em; font-weight: bold;">メニュー閉じる</a></div>
  79.     
  80.     <div style="padding: 3em 0.2em;">
  81.       <h2>CSS+jqueryでメインとメニュー切替えのメニュー部</h2>
  82.       <p style="font-size:1.2em;font-weight:bold">画面の右上の「メニュー閉じる」をクリック</p>
  83.       <p>
  84.         サブコンテンツ（メニュー）<br />
  85.         わかりやすいように背景をグレーにしています<br />
  86.       </p>
  87.     </div>
  88.   </div>
  89. </div>
  91. <script type="text/javascript">
  92.   var mw = "#mWrap";
  93.   var sw = "#sWrap";
  94.   
  95.   function menuOpen() {
  96.     $(mw).animate({left: "-100%" },
  97.                   {complete: function(){ $(mw).css({"display":"none"}); } }
  98.                  );
  99.     $(sw).css({"display":"block"});
  100.     $(sw).animate({ left: 0 });
  101.   }
  102.   
  103.   function menuClose() {
  104.     $(sw).animate({left: "100%" },
  105.                   {complete: function(){ $(sw).css({"display":"none"}); } }
  106.                  );
  107.     $(mw).css({"display":"block"});
  108.     $(mw).animate({ left: 0 });
  109.   }
  110. </script>
  111. </body>
  112. </html>