プラグインなし！横からスライドするドロワーメニューの作り方

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

css

プラグインなし！横からスライドするドロワーメニューの作り方

2018/08/17

ハンバーガーメニュー

ボタンを押せば画面の横からメニューがスライドして現れるドロワーメニュー。

プラグインを使わず、cssで実装可能。

HTMLを記入

<div class="drawer">
   <ul>
      <li><a href="#">サンプル</a></li>
      <li><a href="#">サンプル</a></li>
   </ul>
   <div class="drbtn">
        <span class="hambarg"></span>
        <span class="hambarg"></span>
        <span class="hambarg"></span>
        <span>MENU</span>
   </div><!--drbtn-->
</div><!--drawer-->

<ul>

</ul>

</div>

</div>

<div class=”drawer”></div>で囲った全部がスライドして出てくるドロワーメニューの部分になります。

そして<div class=”drbtn”></div>はタップするためのボタンの部分で、その中にある３つ並んだ<span class=”hambarg”></span>が通称ハンバーガーといわれる３本線になります。

CSSを記入

@media only screen and (max-width: 736px) {}の中にcssを記入。

/*ドロワーメニューのClose時のスタイルシート*/
.drawer {
  position:fixed;
  top:0;
  left:0;
  width: 300px;
  height: 100%;
  background: #fff;
  padding: 50px 10px;
  -webkit-transform: translateX(-300px);
  transform: translateX(-300px);
  -webkit-transition:ease .5s;
  transition:ease .5s;
  z-index:9999;
}

/*ドロワーメニューのClose時のスタイルシート*/

.drawer {

position:fixed;

top:0;

left:0;

width: 300px;

height: 100%;

background: #fff;

padding: 50px 10px;

-webkit-transform: translateX(-300px);

transform: translateX(-300px);

-webkit-transition:ease .5s;

transition:ease .5s;

z-index:9999;

}

Widthは横幅なのですが、スマホ画面の横幅が小さいものであれば380pxということもあって、それよりも小さい300pxにしています。heightはスマホ画面いっぱいに表示したいので100％に指定。

そして、Close時に左側へドロワーメニューを隠すために-transformをtranslateX（-300px）に指定しています。滑らかな動きはtransitionを使っています。

/*ドロワーメニューの開閉ボタン*/
.drbtn {
  position: fixed;
  top:0;
  right: -50px;
  width: 50px;
  height: 50px;
  -webkit-transition:ease .5s;
  transition:ease .5s;
  cursor:pointer;
  align-items: flex-end;
  display: flex;
  justify-content: center;
  font-size: 10px;
  padding-bottom: 2px;
  z-index: 10000;
}

/*ドロワーメニューの開閉ボタン*/

.drbtn {

position: fixed;

top:0;

right: -50px;

width: 50px;

height: 50px;

-webkit-transition:ease .5s;

transition:ease .5s;

cursor:pointer;

align-items: flex-end;

display: flex;

justify-content: center;

font-size: 10px;

padding-bottom: 2px;

z-index: 10000;

}

positionはfixedにして絶対値を指定。top:0で一番上にして、right: -50pxで、ドロワーメニューがCloseしている時でも見えるようにしています。

/*ハンバーガーボタンを作るスタイルシート*/
.hambarg {
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  height: 2px;
  width: 30px;
  background: #5c6b80;
  -webkit-transition: ease .5s;
  transition: ease .5s;
}
.hambarg:nth-child(1) {
    top: 20%;
    left: 50%;
}
.hambarg:nth-child(2) {
    top: 40%;
    left: 50%;
}
.hambarg:nth-child(3) {
    top: 60%;
    left: 50%;
}

/*ハンバーガーボタンを作るスタイルシート*/

.hambarg {

position: absolute;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

height: 2px;

width: 30px;

background: #5c6b80;

-webkit-transition: ease .5s;

transition: ease .5s;

}

.hambarg:nth-child(1) {

top: 20%;

left: 50%;

}

.hambarg:nth-child(2) {

top: 40%;

left: 50%;

}

.hambarg:nth-child(3) {

top: 60%;

left: 50%;

}

/*ドロワーメニューをOPENにするスタイルシート*/
.drawer.action {
  -webkit-transform:translateX(0);
  transform:translateX(0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
 
/*ボタンをドロワーメニュー内に表示*/
.drbtn.action {
  right: 0;
}
 
/*ハンバーガーボタンを"×"に変える*/
.drbtn.action {
  .hambarg:nth-child(1) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .hambarg:nth-child(2) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity: 0;
  }
  .hambarg:nth-child(3) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}

/*ドロワーメニューをOPENにするスタイルシート*/

.drawer.action {

-webkit-transform:translateX(0);

transform:translateX(0);

overflow-y: auto;

-webkit-overflow-scrolling: touch;

}

/*ボタンをドロワーメニュー内に表示*/

.drbtn.action {

right: 0;

}

/*ハンバーガーボタンを"×"に変える*/

.drbtn.action {

.hambarg:nth-child(1) {

top: 50%;

-webkit-transform: translate(-50%,-50%) rotate(45deg);

transform: translate(-50%,-50%) rotate(45deg);

}

.hambarg:nth-child(2) {

top: 50%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

opacity: 0;

}

.hambarg:nth-child(3) {

top: 50%;

-webkit-transform: translate(-50%,-50%) rotate(-45deg);

transform: translate(-50%,-50%) rotate(-45deg);

}

先ほどClose時でtransformを-300pxにしてドロワーメニューを画面左に隠していましたが、ここでは値を0にして隠れていたドロワーメニューを表示するようにしています。

それからドロワーメニューのリストが多い場合でも縦スクロールできるようにoverflow-yをautoに指定。ボタン部分はOpen時にメニュー内側に表示するようにright: 0にしています。

jQeryを記入

<html>～</html>間に記入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</body>の直前に記入

$(function() {
 $('.drbtn').on('click', function () {
  $(this).toggleClass('action');
  $('.drawer').toggleClass('action');
 });
});

$(function() {

$('.drbtn').on('click', function () {

$(this).toggleClass('action');

$('.drawer').toggleClass('action');

});

参考URL：http://ishi-note.com/1749.html