2015.10.08

【CSS , jQuery】クリックでメニューアイコンが可変するスマホのメニューボタンとトグルメニュー

Category: css / js

Tags, , , ,

クリックでメニューアイコンが可変するスマホのメニューボタンとトグルメニューのサンプルです。
メニューボタンは、ボタンにonというクラスが付くと形が☓ボタンに変わる仕様です。
装飾はcssで行い、クラスの付与とトグルメニューの開閉みをjsで行っています。

html

<header class="global-header" id="global-header">
<h1><a href="#">ロゴ</a></h1>
<p class="sp-btn" id="sp-btn">
<span></span>
<span></span>
<span></span>
</p>
<nav id="global-nav">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</nav>
</header>	

css

.global-header {
overflow: hidden;
position: relative;
width: 100%;
-moz-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
background: #fff;
}
.global-header h1 {
display: block;
height: 45px;
margin: 0;
padding: 16px 0 0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
line-height: 1;
vertical-align: top;
}
/* メニューボタン */
.global-header .sp-btn {
position: absolute;
top: 0;
right: 0;
display: block;
width: 45px;
height: 45px;
cursor: pointer;
}
.global-header .sp-btn span {
display: block;
background: #414042;
width: 20px;
height: 2px;
position: absolute;
right: 12px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.global-header .sp-btn span:first-child {
top: 14px;
}
.global-header .sp-btn span:nth-child(2) {
top: 21px;
}
.global-header .sp-btn span:last-child {
bottom: 15px;
}
.global-header .sp-btn.on span:first-child {
-moz-transform: translateY(6px) rotate(-45deg);
-ms-transform: translateY(6px) rotate(-45deg);
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
}
.global-header .sp-btn.on span:nth-child(2) {
opacity: 0;
}
.global-header .sp-btn.on span:last-child {
-moz-transform: translateY(-8px) rotate(45deg);
-ms-transform: translateY(-8px) rotate(45deg);
-webkit-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg);
}
/* トグルメニュー */
.global-header nav {
display: none;
}
.global-header ul {
width: 100%;
margin: 0;
padding: 0;
line-height: 1;
}
.global-header li {
margin: 0;
display: block;
border-top: 1px solid #ccc;
font-size: 14px;
}
.global-header li a {
position: relative;
display: block;
padding: 12px 4.0625% 12px;
}
.global-header li a:before {
display: block;
content: "";
position: absolute;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 3.75%;
width: 10px;
height: 10px;
margin-top: -5px;
background: #0C7CD5;
}
.global-header li a:after {
display: block;
content: "";
position: absolute;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 4.375%;
width: 10px;
height: 10px;
margin-top: -5px;
background: #fff;
}

sass / compass

.global-header {
overflow: hidden;
position: relative;
width: 100%;
@include box-shadow(0 0 1px 0 rgba(0,0,0,0.4));
background: #fff;
h1 {
display: block;
height: 45px;
margin: 0;
@include box-sizing(border-box);
font-size: 14px;
line-height: 1;
vertical-align: top;
}
.sp-btn {
position: absolute;
top: 0;
right: 0;
display: block;
width: 45px;
height:45px;
cursor: pointer;
span {
display: block;
background: #414042;
width: 20px;
height: 2px;
position: absolute;
right: 12px;
@include transition(all ease-out 0.3s);
&:first-child {
top: 14px;
}
&:nth-child(2) {
top: 21px;
}
&:last-child {
bottom: 15px;
}
}
&.on {
span {
&:first-child {
@include transform(translateY(6px) rotate(-45deg));
}
&:nth-child(2) {
opacity: 0;
}
&:last-child {
@include transform(translateY(-8px) rotate(45deg));
}
}
}
}
nav {
display: none;
}
ul {
width:100%;
margin: 0;
padding: 0;
line-height: 1;
}
li {
margin: 0;
display: block;
border-top: 1px solid #ccc;
font-size: 14px;
a {
position: relative;
display: block;
padding: 12px 13px/320px*100% 12px;
&:before{
display: block;
content: "";
position: absolute;
@include transform(rotate(45deg));
top: 50%;
right: 12px/320px*100%;
width: 10px;
height: 10px;
margin-top: -5px;
background: #0C7CD5;
}
&:after{
display: block;
content: "";
position: absolute;
@include transform(rotate(45deg));
top: 50%;
right: 14px/320px*100%;
width: 10px;
height: 10px;
margin-top: -5px;
background: #fff;
}
}
}
}

js

//sp menu
$("#sp-btn").click(function(){
$(this).toggleClass('on');
$('#global-nav').slideToggle();
});
//PC SP切り替え時にスタイルリセット
var spW = 640; //ブレークポイント
$(window).resize(function(){
var winWidth = window.innerWidth ? window.innerWidth: $(window).width();
if(winWidth > spW && $('#global-nav').is(':hidden')) {
$('#global-nav').removeAttr('style');
$("#sp-btn").removeClass('on');
}
});

1ソースでPCとSP表示を切り替えている場合は、ブレークポイントで一度リセットするようにすると、
表示を切り替えた時にメニューが消える不具合等の対策になると思います。

参考リンク

Category : css / js