ヤッチーのブログ

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

Bootstrapに設置したドロワーメニューの背景色・文字色を変更し、画像を挿入

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

作業最終形デモ 

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

前回の記事でBootstrap Honokaに導入したドロワーメニューですが、白背景に黒文字と殺風景です。 

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

これを格好良くします。

メニューの背景色を鮮やかな青色とし、文字を白色に変更します。 

前回の記事で./cssに設置したdrawer.min.cssを編集します。

実際は一行で記載されているのですが、分かり易いように改行しました。下のようにcolorとbackground-colorを変更します。

.drawer-nav{
 position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;
 /* color:#222;background-color:#fff; */
 color:#ffffff; background-color:#007bff;
}
.drawer-brand{
 font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;
 /* color:#222; */
 color:#fff;
}
.drawer-menu{margin:0;padding:0;list-style:none}
.drawer-menu-item{
 font-size:1rem;display:block;padding:.75rem;text-decoration:none;
 /* color:#222; */
 color:#fff;
}

下のように背景色と文字色が変更されたことを確認します。 

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

作業最終形デモ 

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

まだまだ殺風景ですので、ドロワーメニューに画像を挿入して、賑やかにします。

HTMLファイルの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="#">Wiki</a></li>
   <li><a class="drawer-menu-item drawer-img" href="#"><img src="./images/sub_image_1.jpg" alt="" class="img-responsive"></a></li>
   <li><a class="drawer-menu-item drawer-img" href="#"><img src="./images/sub_image_8.jpg" alt="" class="img-responsive"></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>

画像を単に挿入しただけでは、上下の余白が広過ぎ、左右の余白に余裕が無く、見た目が見苦しいので、drawer-imgというクラスを作成し、指定しています。

drawer.min.cssを編集します。

.drawer-img{ padding:0.25rem 1rem;}

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

大分良くなりました!

作業最終形デモ 

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