ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

Bootstrap Honokaで左ドロワーメニュー

f:id:php-7com:20181008011841j:plain

お洒落なサイトやスマホサイトによくある左上とか右上にあるアイコンを押すと、シュワっとメニューが表れてくるドロワーメニューをBootstrap Honokaに導入してみました。下のようなメニューです。

作業最終形デモ

https://burrn.work/honoka/top3.html

f:id:php-7com:20181008011908j:plain

Drawer - Flexible drawer menu using jQuery, iScroll and CSS.

こちらからCSS、JSファイルを制作者に感謝して、ダウンロードさせていただきます。

ダウンロードしたdrawer-master.zipを解凍し、その中から、
drawer.js を ./jsフォルダに
drawer.min.csssandbox.cssを ./cssフォルダに入れました。

HTMLファイル
<head>~</head>内に下記CSSのリンクを貼りました。
<link rel="stylesheet" type="text/css" href="css/drawer.min.css">
<link rel="stylesheet" type="text/css" href="css/sandbox.css">

<body>に以下のクラスを指定しました。
<body class="drawer drawer--left">

<body>内下部にJSファイルのリンクを貼り、以下の記述をしました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<script src="./js/drawer.js" charset="utf-8"></script>
<script>
 $(document).ready(function() {
  $('.drawer').drawer();
 });
</script>

HTMLに元々あった<header>~</header>を削除して、下記に入れ替えました。

<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="#">Drawer</a></li>
   <li><a class="drawer-menu-item" href="#">Top</a></li>
   <li><a class="drawer-menu-item" href="#">Japanese Page</a></li>
   <li><a class="drawer-menu-item" href="#">English Page</a></li>
   <li><a class="drawer-menu-item" href="#">Download</a></li>
   <li><a class="drawer-menu-item" href="#">Wiki</a></li>
   <li style="height:500px"><span class="drawer-menu-item" >height:500px box</span></li>
   <li><span class="drawer-menu-item" >box end</span></li>
  </ul>
 </nav>
</header>

おーっ!ドロワーメニュー出来ました!

スマホで確認すると、h1要素とアイコンが重なっていましたので、@mediaでCSSの調整が必要でした。調整したところ、スマホでも良い感じであることを確認しました。

 

f:id:php-7com:20181008012053j:plain

作業最終形デモ

https://burrn.work/honoka/top3.html