スマホメニューの作り方
当サイトで使用しているのスマホメニューの作り方を解説します。
HTML
<!-- ボタン -->
<p class="menu-trigger is_sp" data-id=".drawer_menu">
<span></span>
<span></span>
<span></span>
</p>
<!-- メニュー -->
<nav class="drawer_menu">
<ul class="drawer_menu_list">
<li class="drawer_menu_content"><a href="../cording.html">Cording</a></li>
<li class="drawer_menu_content"><a href="../design.html">Design</a></li>
<li class="drawer_menu_content"><a href="../tools.html">Tools</a></li>
</ul>
</nav>
上記ボタンのコードはメニューボタンを置きたい場所に記述し、メニューのコードはfooerの閉じタグの下に配置します。
CSS
/* ボタン */
.menu-trigger, .menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.menu-trigger {
position: relative;
width: 32px;
height: 28px;
float: right;
margin: 20px;
z-index: 10;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-trigger span:nth-of-type(2) {
top: 12px;
}
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(14px) rotate(-45deg);
transform: translateY(14px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-11px) rotate(45deg);
transform: translateY(-11px) rotate(45deg);
}
/* メニュー */
.drawer_menu {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 5;
background-color: rgba(173,166,252,0.9);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.drawer_menu_list {
padding: 70px 20px;
}
.drawer_menu_content {
font-size: 17px;
text-align: center;
padding: 14px;
}
.drawer_menu_content a {
color: #fff;
position: relative;
padding: 20px;
letter-spacing: 0.2em;
}
.body_hide {
overflow: hidden;
position: relative;
height: 100%;
}
メニューは最初は非表示で、クリックされたら画面いっぱいに表示されるように記述します。 また、メニューが多い場合もあるので、縦方向にスクロールできるようにしておきます。 なお、ボタンの動きはこちらを参考にさせていただきました。
JS
$(function(){
$('.menu-trigger').on('click', function(){
if($('.drawer_menu').css('display') === 'none') {
$(this).toggleClass('active');
$('.drawer_menu').fadeIn(600);
$('body').addClass('body_hide');
}else{
$(this).removeClass('active');
$('.drawer_menu').fadeOut(600);
$('body').removeClass('body_hide');
}
});
});
JSの記述は、トリガーとなるメニューボタンがクリックされ、drawer_menuが表示されていなかったらactiveクラスを追加し表示。drawer_menuが表示されていたらactiveクラスを外して非表示するという流れです。