ドロワーメニューの作成に必要なファイルと作成手順です。
猫カフェのスマートフォン用ナビゲーションを完成させましょう。
基本は、コピーペーストで簡単に作成できます。
ファイルをDLする
jsファイルは「jsフォルダ」を作成し、cssファイルは「cssフォルダ」へ保存してください
nyanroom
index.html
room.html
js（作成するフォルダ）
drawer.js（DLしたファイル）
css
drawer.css（DLしたファイル）
layout.css（使用するファイル）
index.css
destyle.css
images
nav.png（使用する画像ファイル）
作成手順
CSSファイルは、layout.cssの<link>の下へ貼り付けます。
<title>保護猫カフェ/にゃんルーム</title>
<link href="css/destyle.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
<link href="css/drawer.css" rel="stylesheet">jsファイルは、</body>の上に貼り付けます。
<footer>
<p>2022 © TOU-WEB</p>
</footer>
<script src="js/drawer.js"></script>
</body> <title>保護猫カフェ/にゃんルーム</title>
<link href="css/destyle.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
<link href="css/drawer.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>今回はjQueryプラグインのCDNはありません。DLしたファイルがプラグインですね。
ドロワーメニューにするために、id名を追加します。
<!-- navに#g-nav追加 -->
<nav id="drawer-nav">
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="room.html">お部屋のご案内</a></li>
<li><a href="#">同居猫の紹介</a></li>
<li><a href="#">カフェメニュー</a></li>
<li><a href="#">保護猫カフェについて</a></li>
<li><a href="#">ご予約・お問い合わせ</a></li>
</ul>
</nav></nav>の下に<div>を記述して、ボタン画像を表示、背景色を表示するボックスを挿入します。
</nav>
<!-- div２カ所追加 -->
<div id="menubtn"><img src="images/nav.png" alt="menuボタン"></div>
<div id="drawer-bg"></div>
</header>ドロワーメニューとボタンの表示・非表示の設定です。
スマートフォン用のnavセレクタ部分を削除、または無効化します。
/* ナビゲーション */
/* nav{
display: none;
} */PC用のわかりやすい場所に、メニューボタンのセレクタを追加し、非表示にします。
@media screen and (min-width:960px){
h2{
font-size: 28px;
width: 960px;
}
/*メニューボタンを非表示*/
#menubtn{
display: none;
}
コメントアウト文がわかりづらかったと思いますが、メニューボタン用のセレクタを追加して、非表示にしています。
スマートフォン用の方は、CSSが無くても表示されます。
カスタマイズの紹介
ドロワーメニューを表示した時に、ロゴが背面に表示されてしまいます。
これはボックスの重なり順、z-indexプロパティの影響です。
ロゴ画像のボックスを最前面で表示するには、ドロワーメニューのz-indexの数値よりも、大きい数値にすると最前面で表示できます。
header>p{
width: 40vw;
margin: auto;
position: relative;
top: 7.6vw;
z-index:1000;
}drawer.cssで文字サイズや文字色、背景色、ボタンの配置場所を変更できます
背景色の変更
/*円の拡大*/
#drawer-bg{
position: fixed;
z-index:3;
width: 100px;/*円の形*/
height: 100px;/*円の形*/
border-radius: 50%;/*円の形*/
background: rgba(255,210,210,0.75);/*円の色*/
transform: scale(0);
left:-50px;/*円のスタート位置*/
bottom:-50px;/*円のスタート位置*/
transition: all 0.6s;/*アニメーションの時間0.6秒*/
}メニューのテキストリンクの設定
/*リストの設定*/
#drawer-nav li{
text-align: center;
list-style: none;
}
#drawer-nav li a{
font-size: 14px;
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}3,8,9,11,15行目は、デザインを変更できるでしょう
メニューボタン（肉球）の配置
/* メニューボタン */
#menubtn{
position:fixed;
bottom:10px;/* ボタンの位置 */
left: 10px;/* ボタンの位置 */
z-index: 9999;
cursor: pointer;
width: 50px;/* ボタンのサイズ */
height:50px;/* ボタンのサイズ */
}4,5行目は、positionで固定表示した配置場所で、bottomは下から、leftは左からの距離です。
8,9行目は、ボタンを表示するボックスのサイズです。