読者です 読者をやめる 読者になる 読者になる

P N R A

東京都中野区に所在を構えるウェブ制作会社PNRA DESIGN OFFICE

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

jQuery基礎講座[第2回]

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

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

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

f:id:PNRA:20140917120429p:plain

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要素を消すことで、3本線を2本線に変えています。

とっても簡単ですよね♡

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

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