[オープン]HTMLとCSSだけで作るハンバーガーボタンで開閉するメニューがあるページHamburger_noJS_001_os

<style type="text/css">

/** ページ全体。ご自身のレイアウトに書き換えてください。 **/
body{font-family:"メイリオ";margin:0;}

/** メニューコンテナ全体。 **/
.menu_container{position:fixed;top:0;left:0;text-align:left;}

/** ハンバーガーボタン全体。大きさや位置は変更可。 **/
.menu_button{display:block;position:fixed;top:20px;left:20px;width:40px;height:40px;cursor:pointer;z-index:200;}

/** ハンバーガーボタンの部品。それぞれの中に横棒が入る。 **/
.ham,.bur,.ger{display:block;position:absolute;top:0px;left:0px;width:100%;height:100%;transition-duration:0.5s;}

/** ハンバーガーの3本の横棒。 **/
.bar{position:absolute;width:100%;height:20%;background-color:#333;transition-duration:0.5s;}
.ham .bar{top:40%;}
.bur .bar{top:10%;}
.ger .bar{top:70%;}

/** メニューボタンがクリックされた時のハンバーガーボタン内の棒の動作。 **/
#check_box:checked~.menu_button .ham .bar{top:0;height:100%;background-color:#699;}
#check_box:checked~.menu_button .bur .bar{top:40%;background-color:#f66;}
#check_box:checked~.menu_button .ger .bar{top:40%;background-color:#f66;}

/** メニューボタンがクリックされた時のハンバーガーボタン内の2つ目の部品の動作。回転の大きさ～degは変更可。 **/
#check_box:checked~.menu_button .bur{transform:rotate(225deg);}

/** メニューボタンがクリックされた時のハンバーガーボタン内の3つ目の部品の動作。回転の大きさ～degは変更可。 **/
#check_box:checked~.menu_button .ger{transform:rotate(-225deg);}

/** チェックボックスを非表示に。 **/
#check_box{display:none;}

/** メニュー。 **/
.menu{position:fixed;top:0;left:-300px;width:300px;background-color:#eee;transition-duration:0.5s;z-index:100;}

/** メニューボタンがクリックされた時のメニューの動作。 **/
#check_box:checked~.menu{left:0;}

/** メニュー内のリスト全体。 **/
.menu ul{list-style:none;padding:0;margin-top:80px;box-sizing:border-box;}

/** メニュー内リスト。 **/
.menu ul li{background-color:#ddd;margin:2px 0px;box-sizing:border-box;}

/** リスト内のリンク。 **/
.menu ul li a{text-decoration:none;color:#333;font-size:18px;display:block;padding:10px 0px 10px 20px;transition-duration:0.5s;box-sizing:border-box;}

/** リスト内のリンクのホバー時。 **/
.menu ul li a:hover{color:#eed;background-color:#333;}

</style>

[オープン]HTMLとCSSだけで作るハンバーガーボタンで開閉するメニューがあるページHamburger_noJS_001_os

・　サンプルの説明: 　HTMLとCSSだけで作られたハンバーガーボタン（このページでは左上部に固定）のクリックで開閉するメニューがあるページのテンプレートです。ハンバーガーボタンは、スタイルシートで位置やサイズを変更しても動作します。このページではtop:20px;left:20px;width:40px;height:40px;ですが、これを例えばtop:10px;left:10px;width:60px;height:60px; や top:30px;left:30px;width:20px;height:20px;などとしても動作します。メニューのデザインを変更すれば、もっと大きいサイズでも使用できます。; 　このサンプルは掲載しているHTMLとCSSのソースコードのみで動きます。 JavaScripのプログラムや、jQueryなどのライブラリーやプラグインは不要です。個人・商用を問わず無料で自由に使用できます。; 　このページは文字コード「UTF-8」で書いています。ソースの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

⇔

・　ソース: 　以下のソースコードはページ全体のもので、他のページに張り付けるものではありません。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.