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

jQuery基礎講座[第２回]

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

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

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

jQuery基礎講座：ハンバーガーナビゲーションボタンを作ろう！ | 株式会社パナレア

見ればだいたい分かるかと思いますが、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要素を消すことで、３本線を２本線に変えています。

とっても簡単ですよね♡

それではまた次回( ´•౪•`)

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