CSSを使ったハンバーガー(三本線)とバツ(×)ボタンを、簡単に切り替える方法をご紹介します。
toggleClassを使ってclassを追加・削除するだけです。スマホサイトのメニューボタン等に使えます。
Contents
ディスプレイ広告
ハンバーガー(三本線)とバツ(×)ボタンのCSS記述
※ハンバーガー(.menu、.menu span)とバツボタン(.close、.close span)のCSS記述です。サイズ・色等は必要に応じて書き換えてください。
<style type="text/css">
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
line-height: 1.8em;
}
h1{
font-size:18px;
line-height:1.6em;
text-align:center;
font-weight:normal;
padding:10px 0;
}
.menu{
width: 50px;
height: 50px;
cursor: pointer;
margin: 0 auto;
position: relative;
}
.menu span{
display: block;
margin: 0;
border: none;
width: 50%;
height: 3px;
background: #000;
transform-origin:0% 50%;
position: absolute;
top: 12px;
left: 25%;
transition: .3s;
}
.menu span:nth-of-type(2){
top: 21px;
}
.menu span:nth-of-type(3){
top: 30px;
}
.close span{
left: 30%;
}
.close span:nth-of-type(1){
transform: rotate(45deg);
width: 52%;
}
.close span:nth-of-type(2){
opacity: 0;
}
.close span:nth-of-type(3){
top: 30px;
transform: rotate(-45deg);
width: 52%;
}
</style>
メニューボタンのHTML記述例
※class=”menu”タグ要素内にspanタグを3つ用意します。
<div class="menu">
<span></span>
<span></span>
<span></span>
</div>
メニュークリック時のJavaScritp記述
※jquery-2.2.0.min.jsファイルを読み込みます。toggleClassでclassにcloseを追加・削除してます。必要に応じて書き換えてください。
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".menu").click(function() {
$(this).toggleClass("close");
});
});
</script>
CSSでハンバーガー(三本線)をバツ(×)に切り替えるメニューボタンデモページ
CSSでハンバーガー(三本線)をバツ(×)に切り替えるメニューボタンデモ
このサンプルをベースにして、さまざまなスタイルやアニメーションをカスタマイズしてみてください。
※流用される場合は自己責任でお願いします。