CSSのみで簡単実装 ハンバーガーメニューの作り方
スマホサイトでおなじみ、ハンバーガーメニュー
今日は、CSSのみで実装可能、
開閉動作付きハンバーガーメニューを作成しました。
以下、このたびのソースを公開しておきます。
ソース公開
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="/css/style.css" type="text/css" /> <script></script> </head> <body> <div id="search"> <h2 class="search">条件を選んで絞り込む</h2> <input type="checkbox" name = "checked"class="menuopen" id="checked"> <div class="codecontent"> <fieldset class="members"> <legend>条件</legend> <ul> <li><input id="members01" type="checkbox" name="members[]" value="members01"><label class="check" for="members01">条件1</label></li> <li><input id="members02" type="checkbox" name="members[]" value="members02"><label class="check" for="members02">条件2</label></li> <li><input id="members03" type="checkbox" name="members[]" value="members03"><label class="check" for="members03">条件3</label></li> <li><input id="members04" type="checkbox" name="members[]" value="members04"><label class="check" for="members04">条件4</label></li> </ul> <span class="select"> <select name="members_sp"> <option value="members_all">こだわらない</option> <option value="members01">条件1</option> <option value="members02">条件2</option> <option value="members03">条件3</option> <option value="members04">上記以外</option> </select> </span> </fieldset> </div><!--.codecontent--> </div><!--search--> </body> </html>
CSS
<style> ul { list-style: none; } /******************** search ********************/ #search { width: 100%; margin: 0; padding: 15px 0 2px; background: #bafef8; box-sizing: border-box; } #search h2.search{ background: #fff; border-radius: 10px; box-sizing: border-box; font-size: 26px; font-weight: bold; padding: 16px; margin: 0 auto; position: relative; width: 800px; } #search h2.search:before { content: ""; border: 15px solid transparent; border-top: solid 20px #fff; position: absolute; left: 20px; bottom: -35px; } /***************** menuopen button ********************/ /*@media screen and (max-width: 480px){*/ #search_form{ width: 90%; } div.codecontent { display:none; } #checked:checked ~div.codecontent { display:block; } input.menuopen { display: block; position:absolute; top: 48px; right: 60px; } /*チェックボックスを消す*/ .menuopen { -webkit-appearance: none; -moz-appearance: none; border-width: 0; width: 0; height: 0; outline:0; } .menuopen:focus{ outline:0; } .menuopen:before,.menuopen:after{ position: absolute; content: ""; display: block; height: 8px; width: 40px; border-top-style: solid; border-bottom-style: solid; } .menuopen:before{ top: 2px; border-top-width: 4px; border-bottom-width: 2px; border-color: #000; } .menuopen:after{ top: 16px; border-top-width: 2px; border-bottom-width: 4px; border-color: #000; } /*閉じるボタン*/ .menuopen:checked:before, .menuopen:checked:after { top: 14px; height: 0; } .menuopen:checked:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg) } .menuopen:checked:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } </style>
《参考サイト》
jQueryを使った開閉式スライドトグル&フェードトグル(slideToggle, fadeToggle) – Diglog :
http://diglog.org/javascript/943.html
CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ | NxWorld :
http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html
メニューの三本線「ハンバーガーメニュー」を HTML と CSS だけで実装する方法 :
https://jquery.nj-clucker.com/humberger-menu-by-html-css/
ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」! | Web Design Magazine :
http://webdesignmagazine.net/html-css/hamburgers/
CSS3とjQueryで作る「開閉に合わせて×ボタンに変化させる」ハンバーガーメニュー | クリエイタークリップ :
https://creatorclip.info/2015/06/css3-jquery-hamburger-menu-cross-mark-toggle/