web026 ハンバーガーメニュー
ハンバーガーメニュー
■考え方
・span要素のみで、cssで装飾していく。
・positionで配置
・擬似クラス(::before,::after)で要素を追加する。
・::afterは::beforeの直下に配置されるため、marginの取り方をうまく計算する。
・表示されるコンテンツは、jQuery(fadeToggle()など)で表示/非表示を行う。
・clickイベントには、
■コード
html
<div class="btn"> <span></span> </div><!-- .btn -->
.btn{ width: 50px; height: 50px; border-radius: 5px; background: #2e4750; position: absolute; top: 3px; right: 3px; cursor: pointer; } .btn span{ display: block; width: 30px; height: 3px; border-radius: 2px; background: #fff; position: absolute; top: 23px; right: 10px; } .btn span::before{ content:""; display: block; width: 30px; height: 3px; border-radius: 2px; background: #fff; margin-top: -10px; } .btn span::after{ content:""; display: block; width: 30px; height: 3px; border-radius: 2px; background: #fff; margin-top: 17px; }
■参考
http://www.invision-inc.jp/hamburger-button_jquery/
https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html