【コピペOK】jQueryでシンプルなハンバーガーメニューを作る方法
ボタンを押すとナビメニューがアニメーション表示されるシンプルなハンバーガーメニューを作成します。レスポンシブ化するときにおすすめです。
デモ
- htmlでメニュー部分を作成
- CSSでスタイリング
- jQueryで動きをつける
実際に動きを出すのはCSS部分です。jQueryはクラスを付与するために使います。
スポンサードサーチ
HTML
<!-- ナビメニュー部分 --> <nav class="NavMenu"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> </ul> </nav> <!-- ハンバーガーメニュー部分 --> <div class="Toggle"> <span></span> <span></span> <span></span> </div>
CSS
/*ナビメニューのスタイルを指定*/
nav.NavMenu{
position: fixed; /*表示位置を固定*/
z-index: 2; /*重ね順を変更*/
top: 0; /*表示位置を指定*/
left: 0; /*表示位置を指定*/
background: #fff;/*背景を白にする*/
color: #000; /*文字色を黒にする*/
text-align: center; /*テキストを中央揃え*/
width: 100%; /*全幅表示*/
transform: translateY(-100%); /*ナビを上に隠す*/
transition: all 0.6s; /*アニメーションの時間を指定*/
}
nav.NavMenu ul{
background: #ccc; /*背景をグレーにする*/
width: 100%;
margin: 0 auto;
padding: 0;
}
nav.NavMenu ul li{
font-size: 1.1em;
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px dotted #333;
}
nav.NavMenu ul li:last-child{
padding-bottom: 0;
border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}
nav.NavMenu ul li a{
display: block; /*クリックできる領域を広げる*/
color: #000;
padding: 1em 0;
}
/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
transform: translateY(0%);
}
/*トグルボタンのスタイルを指定*/
.Toggle {
display: block;
position: fixed; /* bodyに対しての絶対位置指定 */
right: 13px;
top: 12px;
width: 42px;
height: 42px;
cursor: pointer;
z-index: 3;
}
.Toggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 3px #000;
-webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
-moz-transition: .35s ease-in-out; /*変化の速度を指定*/
transition: .35s ease-in-out; /*変化の速度を指定*/
left: 6px;
}
.Toggle span:nth-child(1) {
top: 9px;
}
.Toggle span:nth-child(2) {
top: 18px;
}
.Toggle span:nth-child(3) {
top: 27px;
}
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
スポンサードサーチ
Javascript
//jQueryのライブラリの読み込み <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
//トグルボタンが押されたときに、クラスを付与
<script type="text/javascript">
$(function() {
$('.Toggle').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.NavMenu').addClass('active'); //クラスを付与
} else {
$('.NavMenu').removeClass('active'); //クラスを外す
}
});
});
</script>
以上で完了です。