ハンバーガーメニュー

2021・04・28

＊リセットCSSを読み込ませた上でお試しください＊
ハンバーガーアイコンのクリック（タップ）で、メニューの表示・非表示が切り替わる機能です。ハンバーガーアイコン（三本線）に簡単なアニメーションも実装しています。JavaScriptを使っていますがjQueryは使用していません。
サンプル表示の都合上、実際は position:fixed; とすべきところを、relativeやabsoluteを使っています。コードをコピペする際はpositionプロパティの値にご注意下さい！

メニュー1
メニュー2
メニュー3

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style>
      .allbox {
        display: flex;
      }
      .leftspace,.rightspace {
        background-color:white;
        position:relative;
        z-index:100;
        width:20vw;
      }
      .samplebox {
        width: 60vw;
        height: 60vh;
        margin: 0 auto;
        background-color: rgb(236, 236, 236);
        position: relative;
      }
      .hamburgersamplebox {
        cursor: pointer;
        position: absolute;
        z-index: 100;
        top:5px;
        right:5px;
      }
      .sampleline {
        display:block;
        width: 20px;
        height: 5px;
        border-bottom: solid thin black;
        transition: all .5s;
      }
      .samplebatsu1 {
        transform: rotate(45deg) translate(10px,5px);
        border-color:white;
      }
      .samplebatsu2 {
        opacity:0;
        visibility: hidden;
      }
      .samplebatsu3 {
        transform: rotate(135deg) translate(-1px,-4px);
        border-color:white;
      }
      .hidehanb {
        opacity:0;
      }
      div.samplemenubox {
        width:250px;
        height:100%;
        position: relative;
        z-index:10;
        left:-200px;
        background-color: darkblue;
        color: white;
        opacity:0;
        transition: all 1s;
      }
      div.open {
        left:0;
        opacity:1;
      }
      .samplemenubox li {
        margin-right: 20px;
        padding: 20px;
        border-bottom: solid thin;
        list-style: none;
      }
      div.samplemask {
        opacity:0;
        background-color:black;
        position: absolute;
        top:0;
        width:100%;
        height:100%;
        z-index: 1;
        transition: all 1s;
      }
      div.opensamplemask {
        opacity:.6;
      }
    </style>
  </head>
  <body>
   <div class="allbox">
    <div class="leftspace"></div>
    <div class="samplebox">
      <div id="hamburgersamplebox" class="hamburgersamplebox">
        <span id="sampleline1" class="sampleline"></span>
        <span id="sampleline2" class="sampleline"></span>
        <span id="sampleline3" class="sampleline"></span>
      </div>
      <div id="samplemenubox" class="samplemenubox hidehanb">
        <ul>
          <li>メニュー1</li>
          <li>メニュー2</li>
          <li>メニュー3</li>
        </ul>
      </div>
      <div id="samplemask" class="samplemask"></div>
    </div>
    <div class="rightspace"></div>
   </div>
    <script type="text/javascript">
      {
        document.getElementById('hamburgersamplebox').onclick = function(event) {
          document.getElementById('sampleline1').classList.toggle('samplebatsu1');
          document.getElementById('sampleline2').classList.toggle('samplebatsu2');
          document.getElementById('sampleline3').classList.toggle('samplebatsu3');
          document.getElementById('samplemenubox').classList.toggle('open');
          document.getElementById('samplemask').classList.toggle('opensamplemask');
        }
      }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »