Ｗｅｂページデザインとして、サイド（横）に折りたたみするメニューをＣＳＳだけで書いたことがある。
ＣＳＳだけでサイド開閉メニュー - Oboe吹きプログラマの黙示録
でもこれには、次の欠点がある。
・メニュー開いた時に、スライドする方法の為にブラウザ横スクロールが発生してしまう。
・メニュー開いても、メニュー範囲外のところは 半透明レイヤーを作ってるわけではないのでリンクなどそのまま押せてしまう。
やはりサイド（横）に設置した場合、開いた時にWebページ全体を半透明のレイヤで被せて
メニュー以外のところを押せないようにしないとUI として良くない。
昔から方法はいろいろ見かけてたが、どうも気に入らなかった。
BootStrap 使用することと、併用して使えるものを探していた。。
Git-hub に、
https://github.com/blivesta/drawer/
というシンプルに作られてるものを見つけた。
準備
CDN サイトで書くと。。。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
CSS
構築するページに合わせて、、
<style type="text/css"> body { background-color: #dbf4f0; } main { margin-top: 64px; } nav .dropdown-menu { border: none; } .drawer-menu a{ color: #000000; } .drawer-menu a:hover{ text-decoration: underline; } </style>
設置のＪＳ
<script type="text/javascript"> $(function() { $('.drawer').drawer(); }); </script>
ページ body
<body> <div class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">メニュー</a></li> <li><a class="drawer-menu-item" href="#">リンク１</a></li> <li><a class="drawer-menu-item" href="#">リンク２</a></li> <li class="drawer-dropdown"> <a class="drawer-menu-item dropdown-toggle" data-target="#" href="#" role="button" data-toggle="dropdown">グループ</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Ａａａ</a></li> <li><a class="dropdown-item" href="#">Ｂｂｂ</a></li> <li><a class="dropdown-item" href="#">Ｃｃｃ</a></li> </ul> </li> </ul> </nav> </header> <main role="main"> <div class="container-fluid"> <h1>Page content</h1> <div> <h3>https://github.com/blivesta/drawer/</h3> </div> </div> </main> </div> </body>
メニュー閉じてる時、
メニュー開く、
https://github.com/blivesta/drawer/ が配布しているのは、メニューの中の
ドロップダウンメニュー ul の class は、 drawer-dropdown-menu であるが、
これでは、jQuery ３.x系を使うと以下のエラーが発生する
TypeError: Cannot read property 'setAttribute' of null
これを回避する為に、class="dropdown-menu" にする。
あるいは、<ul>-<li> を書かずに、divタグを書いて divタグ 内に、並べる
<li><a class="drawer-menu-item dropdown-toggle" href="#" role="button" data-toggle="dropdown">グループ</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Ａａａ</a> <a class="dropdown-item" href="#">Ｂｂｂ</a> <a class="dropdown-item" href="#">Ｃｃｃ</a> </div> </li>
とするかになる。
メニュー開閉のアイコンを Fontawesome にしたければ、
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
<div class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <i class="fa fa-bars fa-lg" aria-hidden="true"></i> </button>
で良いだろう。
この時、
button.drawer-toggle{ padding: 10px; }
を書いた方が良いかもしれない。
