HOME

ABOUT

ARCHIVES

CONTACT

javascript

jQuery基礎講座:ハンバーガーナビゲーションボタンを作ろう!

jQuery基礎講座[第2回]

どーも@PNRAです!
忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。

前回ご紹介した『jQuery基礎講座:任意のid属性を使ったクリックアクション』を使って、今日は最近やけによく見るハンバーガーナビゲーションボタンを作りたいと思います。

まずはサンプルから。こちらをご覧ください。

見ればだいたい分かるかと思いますが、transform:rotate(n);を使って作っていきます。

ハンバーガーナビゲーションボタンの実装方法

まずは上記の実装方法を記載していきましょう。

HTML

<div class="wrapper">
<div id="hamburger-botton">
</div>
</div>

CSS

.wrapper {
width:100%;
height:450px;
position:relative;
background:#455765;
}
#hamburger-botton {
position:absolute;
width:90px;
height:10px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transition:linear .5s;
-webkit-transition:all linear .5s;
background:#ffc800;
cursor: pointer;
}
#hamburger-botton::after {
content:' ';
position:absolute;
width:90px;
height:10px;
top:300%;
left:0;
background:#ffc800;
cursor: pointer;
}
#hamburger-botton::before {
content:' ';
position:absolute;
width:90px;
height:10px;
top:-300%;
left:0;
background:#ffc800;
cursor: pointer;
}
#hamburger-botton.action {
position:absolute;
width:90px;
height:10px;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(45deg);
-webkit-transform:translate(-50%,-50%) rotate(45deg);
transition:linear .5s;
-webkit-transition:all linear .5s;
background:none;
cursor: pointer;
}
#hamburger-botton.action::after {
content:' ';
position:absolute;
width:90px;
height:10px;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(90deg);
-webkit-transform:translate(-50%,-50%) rotate(90deg);
transition:linear .5s;
-webkit-transition:all linear .5s;
background:#ffc800;
cursor: pointer;
}
#hamburger-botton.action::before {
content:' ';
position:absolute;
width:90px;
height:10px;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(180deg);
-webkit-transform:translate(-50%,-50%) rotate(180deg);
transition:linear .5s;
-webkit-transition:all linear .5s;
background:#ffc800;
cursor: pointer;
}

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#hamburger-botton').click(function(){
$(this).toggleClass('action');
});
});
</script>

JSの指示は前回の基礎講座(『jQuery基礎講座:任意のid属性を使ったクリックアクション』)と同じです。
今回のハンバーガーナビゲーションの実装に関してはid要素に::before,::afterの疑似要素をあてて、positionでハンバーガーボタンを作り、クリックすることで疑似要素を回転させ、同時にid要素を消すことで、3本線を2本線に変えています。
とっても簡単ですよね♡
それではまた次回( ´•౪•`)

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)