2017年以前の旧ブログ

BLOG2017

2018年以降のブログ

技術部門

簡単なスライドメニューの作り方

ダーシノ Other Blog

ホームページのサイドからスライドで現れるメニューの実装には今の世の中【jQueryプラグイン】が溢れていますね。
今回はそんな【jQueryプラグイン】で実現したい動きが見つからなかったので、簡単にほとんどCSSで実装しました。

今回実装しようとしたのは、コンテンツ領域全体にサイドから覆いかぶさるようなスライドメニューです。

slidesample_main

HTML記載

<div class="wrapper">
<!--MENU Button-->
<div class="menu-btn"><span class="open">OPEN</span><span class="close">CLOSE</span></div>
<!--MENU-->
<nav class="side-menu">
  <ul>
    <li><a href="#">MENU1</a></li>
    <li><a href="#">MENU2</a></li>
    <li><a href="#">MENU3</a></li>
  </ul>
</nav>
<!--CONTENT-->
<div class="contentbox">
  <p>SLIDE MENU<br>CONTENT AREA</p>
</div>
</div>

コンテンツとメニュー部分をdiv.wrappterで包みます。
メニュー位置を指定したいので。
メニューをサイト右上にディスプレイ上で固定の場合は使わなくてもいいです。
<!--MENU Button-->と<!--MENU-->以外はお好みと用途に合わせて変更します。

 

JS記載

<script>
$(function() {
  $("span.close").hide();
  $(".menu-btn span.open").click(function(){
    $(".menu-btn span.close").fadeIn(300);
    $(".menu-btn span.open").hide();
    $(".side-menu").addClass("open");
  });
  $(".menu-btn span.close").click(function(){
    $(".menu-btn span.open").fadeIn(300);
    $(".menu-btn span.close").hide();
    $(".side-menu").removeClass("open");
  });
});
</script>

簡単に、menu-btn内のopenとcloseそれぞれをクリックした時の表示・非表示とside-menuにclassを付与しているだけです。

 

CSS記載

.wrapper{
  position:relative;
  z-index:1;
}
.contentbox{
}
.menu-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
}
.menu-btn .close{
}
.side-menu{
  display:block;
  width:100%;
  position:absolute;
  top:0;
  left:100%;
  overflow:hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
  z-index:2;
}
.side-menu.open{
  left:0;
}
.side-menu ul{
}
.side-menu ul a{
}

必要最低限だけ。
スライド時のアニメーション動作は transition で実装しています。
コンテンツにメニューが覆いかぶさる形になりますので、z-indexの優先は注意必要です。

後は実際のデザインに合わせて.side-menu 以下をstyleで装飾します。

 

実装（DEMO）

ちょっと装飾したDEMOはこちら。

メニューボタンをディスプレイ上に常に表示にする場合は

.menu-btn{
  position:fixed;
  top:10px;
  right:10px;
  z-index:3;
}
.side-menu{
  position:fixed;
  top:0;
  left:100%;
  overflow:hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
  z-index:2;
}

のようにabsolute を fixedに変えるだけで対応できます。

今回はプラグインになかったので、簡単に作りましたが、実際プラグインを実装するよりも簡単でした。
どちらが使いやすいかは人それぞれですが、極力自分で作っていった方が後々が簡単に実装できるかな。

 

BACK BLOG