<label for="menuOn"> <input id="menuOn" type="checkbox"> <menu> <ul> <li><a href="#menu1">概要</a> <li><a href="#menu2">menu2</a> <li><a href="#menu3">menu3</a> <li><a href="#menu4">menu4</a> <li><a href="#menu5">menu5</a> <li><a href="#menu6">動作環境</a> <li><a href="#menu7">仕様</a> <li><a href="#menu8">免責事項</a> </ul> </menu> <div class="overlay"></div> </label> /* =====================================

/* ========================================================== */ /* ここから下がメニューの設定 */ /* ========================================================== */ /* メニューのON/OFFを保存する為のチェックボックス 非表示 */ #menuOn{ display : none } /* 隠しメニューを表示したとき用のスペーサー */ /* なのでデフォルトでは非表示 */ #menuOn + menu + div.spacer{ display : none; } /* 隠しメニューを表示時のメニューの設定 */ /* absolute指定を行い、高さも与える */ #menuOn:checked + menu{ height : calc(100