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

jQuery基礎講座[第２回]

どーも＠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;

}

<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要素を消すことで、３本線を２本線に変えています。
とっても簡単ですよね♡
それではまた次回( ´•౪•`)

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