try catch and ...release: jQuery本体だけでドロワーメニュー

アプリのUIレイアウトデザインでは、DIVやTABLE、IFRAMEを使ってフレームを切ったりしてついつい複雑にしてしまいがちですが、少しでもシンプルでスッキリした画面レイアウトにするには、メニューやアイコンなどの直接メインコンテンツに関係ない部分を「ドロワーメニュー」式にするのが良いでしょう。ドロワーメニューというのは、マウスを置いたりするとニュルッと横などから出てくる、例のスライドメニューのことです。ドロワーメニューを使えば、少しでも画面を広く使うことができます。
以下はそのサンプルコードです。

ライブラリに jQuery (jquery-2.1.0.min.js) を使っています。その他jQueryプラグインなどは不要です。

<!DOCTYPE html>
<html>
<head>
  <title>Layout Example</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      min-height: 100%;
    }
    
    #topmenu {
      position: fixed;
      top: -40px;
      left: 0px;
      text-align: center;
      color: white;
      background: transparent;
      width: 100%;
      z-index: 9999;
    }
    #topmenu_toggle {
      background-color: black;
      width: 80px;
      text-align: center;
      position: relative;
      top: 0px;
      left: 48%;
      box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.4);
      border-radius: 0px 0px 4px 4px;
      cursor: pointer;
    }
    #topmenu_content {
      background-color: black;
      width: 100%;
      height: 40px;
      box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.4);
    }
       
    #bottommenu {
      position: fixed;
      bottom: -40px;
      left: 0px;
      text-align: center;
      color: white;
      background: transparent;
      width: 100%;
      z-index: 9999;
    }
    #bottommenu_toggle {
      background-color: black;
      width: 80px;
      text-align: center;
      position: relative;
      bottom: 0px;
      left: 48%;
      border-radius: 4px 4px 0px 0px;
      cursor: pointer;
    }
    #bottommenu_content {
      background-color: black;
      width: 100%;
      height: 40px;
      box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.4);
    }
    
    #leftmenu {
      position: fixed;
      top: 0px;
      left: -100px;
      margin: 0px;
      min-width: 120px;
      min-height: 100%;
      background-color: gray;
      box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.4);
    }
    
    #rightmenu {
      position: fixed;
      top: 0px;
      right: -50px;
      margin: 0px;
      background-color: rgba(255,255,255,0.4);
      min-width: 60px;
      min-height: 200px;
    }
    .dummy_icon {
      background-color: green;
      border-radius: 30px;
      min-height: 40px;
      min-width: 40px;
      margin-top: 30px;
    }
  </style>
</head>

<body>

  <div id="topmenu">
    <div id="topmenu_content">topmenu_content</div>
    <div id="topmenu_toggle">toggle</div>
  </div>
  
  <div id="leftmenu">
    <div>leftmenu</div>
  </div>
  
  <div id="rightmenu">
    <div class="dummy_icon"></div>
    <div class="dummy_icon"></div>
    <div class="dummy_icon"></div>
  </div>
  
  <div id="bottommenu">
    <div id="bottommenu_toggle">toggle</div>
    <div id="bottommenu_content">bottommenu_content</div>
  </div>

</body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
  
  topmenu_content_height = "40px";
  bottommenu_content_height = "40px";
  rightmenu_width = "60px";
  leftmenu_width = "175px";
  
  $(function() {
    // top menu animation
    $('#topmenu_toggle').click(
      function(){
        if ($('#topmenu').get(0).style.marginTop == topmenu_content_height) {
          $('#topmenu').stop().animate({'marginTop':'0px'}, 300);
        } else {
          $('#topmenu').stop().animate({'marginTop':topmenu_content_height}, 500);
        }
      }
    );
    // bottom menu animation
    $('#bottommenu_toggle').click(
      function(){
        if ($('#bottommenu').get(0).style.marginBottom == bottommenu_content_height) {
          $('#bottommenu').stop().animate({'marginBottom':'0px'}, 300);
        } else {
          $('#bottommenu').stop().animate({'marginBottom':bottommenu_content_height}, 500);
        }
      }
    );
    // left menu animation
    $('#leftmenu').hover(
      function(){
        $(this).find('div').stop().animate({'marginLeft':leftmenu_width},500);
      },
      function () {
        $(this).find('div').stop().animate({'marginLeft':'0px'},300);
      }
    );
    // right menu animation
    $('#rightmenu').hover(
      function(){
        $(this).find('div').stop().animate({'marginRight':rightmenu_width},500);
      },
      function () {
        $(this).find('div').stop().animate({'marginRight':'0px'},300);
      }
    );
  });
</script>
</html>

このコードを実行するとこんなふうな画面が表示されます。

上下のメニューはトグルボタンをクリックすることで開閉でき、左右のメニューはマウスカーソルを乗せるとニュッと出てきます。

try catch and ...release

ページ

2014年3月2日日曜日

jQuery本体だけでドロワーメニュー

0 件のコメント:

コメントを投稿