ドロワーメニュー内にカルーセルを表示する方法
ドロワーメニュー内にカルーセルを表示する方法を紹介します。このサンプルでは、通常のメニュー項目に加えて、画像やお知らせをカルーセル形式で表示できます。HTML・CSS・JavaScriptだけで実装でき、限られたスペースでも複数のコンテンツを見やすく紹介できます。
ドロワーメニューをナビゲーションとして利用するだけでなく、おすすめ商品、人気記事、新着情報、キャンペーンなどを目立たせたい場合にも便利です。左右の矢印やドットナビでスライドを切り替えられるため、情報量を増やしても見やすいレイアウトを維持できます。
メニュー項目、カルーセルの画像や文章、リンク先URL、ドロワーメニューの横幅、背景色、余白、角丸、影、表示アニメーション速度などを自由に変更できます。画面幅640px以下ではスマートフォン向けレイアウトへ切り替わるため、スマートフォン・タブレット・PCで利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを開く」をクリックすると、通常のメニュー項目とカルーセルを配置したドロワーメニューが表示されます。「前へ」「次へ」ボタンまたは丸いボタンをクリックすると、おすすめ情報が切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定する -->
<meta charset="UTF-8">
<!-- スマートフォンで適切な表示サイズにする -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するタイトル -->
<title>ドロワーメニュー内にカルーセルを表示する方法</title>
<!-- CSSファイルを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページの案内エリア -->
<main class="drawer-menu-carousel_wrap">
<!-- タイトル -->
<h1 class="drawer-menu-carousel_title">
ドロワーメニュー内にカルーセルを表示
</h1>
<!-- 説明文 -->
<p class="drawer-menu-carousel_text">
ドロワーメニュー内へ画像カルーセルを表示できます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="drawer-menu-carousel_open"
type="button"
data-drawer-menu-carousel-open>
メニューを開く
</button>
</main>
<!-- 背景オーバーレイ -->
<div
class="drawer-menu-carousel_overlay"
data-drawer-menu-carousel-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<aside
class="drawer-menu-carousel_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="drawer-menu-carousel-title">
<!-- ドロワーメニュータイトル -->
<h2
class="drawer-menu-carousel_drawer-title"
id="drawer-menu-carousel-title">
メニュー
</h2>
<!-- メニュー一覧 -->
<nav
class="drawer-menu-carousel_nav"
aria-label="メインメニュー">
<!--
href="#" を実際のURLへ変更してください。
表示するメニュー名も自由に変更できます。
-->
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お知らせ</a>
<a href="#">お問い合わせ</a>
</nav>
<!-- カルーセル見出し -->
<h3 class="drawer-menu-carousel_heading">
おすすめ情報
</h3>
<!-- カルーセル -->
<div class="drawer-menu-carousel_carousel">
<div
class="drawer-menu-carousel_track"
data-drawer-menu-carousel-track>
<!-- =========================
スライド1
========================== -->
<article class="drawer-menu-carousel_slide">
<!--
sample/images/slide1.jpg
ご自身で用意した画像へ差し替えてください。
-->
<img
src="images/slide1.jpg"
alt="おすすめ画像1">
<div class="drawer-menu-carousel_content">
<h4>おすすめ記事</h4>
<p>
おすすめ記事やサービスを紹介できます。
</p>
</div>
</article>
<!-- =========================
スライド2
========================== -->
<article class="drawer-menu-carousel_slide">
<img
src="images/slide2.jpg"
alt="おすすめ画像2">
<div class="drawer-menu-carousel_content">
<h4>新着情報</h4>
<p>
新着情報や更新情報を掲載できます。
</p>
</div>
</article>
<!-- =========================
スライド3
========================== -->
<article class="drawer-menu-carousel_slide">
<img
src="images/slide3.jpg"
alt="おすすめ画像3">
<div class="drawer-menu-carousel_content">
<h4>キャンペーン</h4>
<p>
キャンペーンやバナーを掲載できます。
</p>
</div>
</article>
</div>
</div>
<!-- 前後ボタン -->
<div class="drawer-menu-carousel_controls">
<button
type="button"
class="drawer-menu-carousel_prev"
data-drawer-menu-carousel-prev>
前へ
</button>
<button
type="button"
class="drawer-menu-carousel_next"
data-drawer-menu-carousel-next>
次へ
</button>
</div>
<!-- インジケーター -->
<div class="drawer-menu-carousel_dots">
<button
class="drawer-menu-carousel_dot is-active"
type="button"
data-drawer-menu-carousel-dot="0">
</button>
<button
class="drawer-menu-carousel_dot"
type="button"
data-drawer-menu-carousel-dot="1">
</button>
<button
class="drawer-menu-carousel_dot"
type="button"
data-drawer-menu-carousel-dot="2">
</button>
</div>
<!-- 閉じるボタン -->
<button
class="drawer-menu-carousel_close"
type="button"
data-drawer-menu-carousel-close>
閉じる
</button>
</aside>
</div>
<!-- JavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>
/* =========================================
共通設定
========================================= */
/* すべての要素と疑似要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除する */
padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ページ内の画像 */
img{
max-width:100%; /* 親要素の横幅を超えないようにする */
}
/* ページ内のボタン */
button{
font:inherit; /* 親要素と同じフォントを使用する */
}
/* =========================================
案内エリア
========================================= */
/* ページの案内エリア */
.drawer-menu-carousel_wrap{
width:100%; /* 画面幅に合わせて縮小表示する */
max-width:700px; /* 最大横幅。値を大きくすると案内エリアが広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
border:1px solid #e5e7eb; /* 案内エリアの枠線 */
border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 案内エリアの背景色 */
text-align:center; /* タイトル・説明文・ボタンを中央揃えにする */
}
/* 案内エリアのタイトル */
.drawer-menu-carousel_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:24px; /* タイトルの文字サイズ */
font-weight:700; /* タイトル文字を太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 案内エリアの説明文 */
.drawer-menu-carousel_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}
/* =========================================
開くボタン
========================================= */
/* ドロワーメニューを開くボタン */
.drawer-menu-carousel_open{
min-height:48px; /* タップしやすい最小高さ */
padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#0b6bff; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}
/* 開くボタンへマウスを重ねた状態 */
.drawer-menu-carousel_open:hover{
background:#0959d9; /* ホバー時の背景色 */
}
/* =========================================
背景オーバーレイ
========================================= */
/* ドロワーメニュー表示時の背景 */
.drawer-menu-carousel_overlay{
display:none; /* 初期状態では非表示にする */
position:fixed; /* ブラウザ画面へ固定する */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9999; /* 他の要素より前面へ表示する */
align-items:stretch; /* ドロワーメニューを画面の高さへ伸ばす */
justify-content:flex-start; /* ドロワーメニューを画面左側へ配置する */
background:rgba(0,0,0,.45); /* 半透明の背景色。.45を大きくすると暗くなる */
}
/* ドロワーメニューを表示している状態 */
.drawer-menu-carousel_overlay.is-active{
display:flex; /* 表示用クラスが付いたときに表示する */
}
/* =========================================
ドロワーメニュー本体
========================================= */
/* ドロワーメニュー本体 */
.drawer-menu-carousel_drawer{
width:380px; /* ドロワーメニューの横幅。値を大きくすると広がる */
max-width:90%; /* 小さい画面で画面幅を超えないようにする */
height:100%; /* ブラウザ画面と同じ高さにする */
padding:24px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示する */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:10px 0 40px rgba(0,0,0,.2); /* ドロワーメニュー右側の影 */
animation:drawer-menu-carousel-slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくすると遅くなる */
}
/* ドロワーメニューのタイトル */
.drawer-menu-carousel_drawer-title{
margin:0 0 20px; /* 下側20pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:24px; /* タイトルの文字サイズ */
font-weight:700; /* タイトル文字を太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* =========================================
メインメニュー
========================================= */
/* メニューリンクを並べるエリア */
.drawer-menu-carousel_nav{
display:flex; /* メニューリンクを並べる */
flex-direction:column; /* メニューリンクを縦方向へ配置する */
gap:8px; /* メニューリンク同士の間隔 */
margin:0 0 28px; /* 下側28pxの余白 */
}
/* 各メニューリンク */
.drawer-menu-carousel_nav a{
display:block; /* リンク全体をクリックできるようにする */
min-height:44px; /* タップしやすい最小高さ */
padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
border-radius:8px; /* リンクの角丸 */
color:#1f2937; /* リンクの文字色 */
font-size:16px; /* リンクの文字サイズ */
font-weight:600; /* リンク文字の太さ */
line-height:1.5; /* リンク文字の行間 */
text-align:left; /* リンク文字を左揃えにする */
text-decoration:none; /* リンクの下線を削除する */
transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}
/* メニューリンクへマウスを重ねた状態 */
.drawer-menu-carousel_nav a:hover{
background:#f1f5f9; /* ホバー時の背景色 */
}
/* =========================================
カルーセル見出し
========================================= */
/* カルーセル上部の見出し */
.drawer-menu-carousel_heading{
margin:0 0 12px; /* 下側12pxの余白 */
padding:20px 0 0; /* 上側20pxの内側余白 */
border-top:1px solid #e5e7eb; /* メインメニューとの区切り線 */
color:#111827; /* 見出しの文字色 */
font-size:18px; /* 見出しの文字サイズ */
font-weight:700; /* 見出し文字を太字にする */
line-height:1.5; /* 見出しの行間 */
text-align:left; /* 見出し文字を左揃えにする */
}
/* =========================================
カルーセル本体
========================================= */
/* カルーセルの表示領域 */
.drawer-menu-carousel_carousel{
width:100%; /* ドロワーメニューの横幅に合わせる */
overflow:hidden; /* 表示領域の外側にあるスライドを隠す */
border:1px solid #d1d5db; /* カルーセルの枠線 */
border-radius:12px; /* カルーセルの角丸 */
background:#ffffff; /* カルーセルの背景色 */
}
/* スライドを横並びにする移動エリア */
.drawer-menu-carousel_track{
display:flex; /* 各スライドを横並びにする */
transition:transform .35s ease; /* 0.35秒でスライドを移動。値を大きくすると遅くなる */
}
/* 各スライド */
.drawer-menu-carousel_slide{
min-width:100%; /* 1枚のスライドを表示領域と同じ横幅にする */
flex-shrink:0; /* スライドが縮まないようにする */
background:#ffffff; /* スライドの背景色 */
}
/* 各スライドの画像 */
.drawer-menu-carousel_slide img{
display:block; /* 画像下部の余分な隙間を削除する */
width:100%; /* スライドの横幅いっぱいに表示する */
height:170px; /* 画像の高さ。値を大きくすると画像が縦に広がる */
object-fit:cover; /* 縦横比を維持したまま表示領域を埋める */
}
/* スライド内の文章エリア */
.drawer-menu-carousel_content{
padding:16px; /* 文章エリアの内側余白 */
text-align:left; /* 文章を左揃えにする */
}
/* スライド内の見出し */
.drawer-menu-carousel_content h4{
margin:0 0 8px; /* 下側8pxの余白 */
color:#111827; /* 見出しの文字色 */
font-size:17px; /* 見出しの文字サイズ */
font-weight:700; /* 見出し文字を太字にする */
line-height:1.5; /* 見出しの行間 */
}
/* スライド内の説明文 */
.drawer-menu-carousel_content p{
margin:0; /* ブラウザ標準の外側余白を削除する */
color:#4b5563; /* 説明文の文字色 */
font-size:14px; /* 説明文の文字サイズ */
line-height:1.7; /* 説明文の行間 */
}
/* =========================================
前へ・次へボタン
========================================= */
/* 前へ・次へボタンを並べるエリア */
.drawer-menu-carousel_controls{
display:flex; /* ボタンを横並びにする */
gap:12px; /* ボタン同士の間隔 */
margin:14px 0 0; /* 上側14pxの余白 */
}
/* 前へボタンと次へボタン */
.drawer-menu-carousel_prev,
.drawer-menu-carousel_next{
flex:1; /* 2つのボタンを同じ横幅にする */
min-height:44px; /* タップしやすい最小高さ */
padding:10px 14px; /* 上下10px・左右14pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:8px; /* ボタンの角丸 */
background:#0b6bff; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:14px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}
/* 前へ・次へボタンへマウスを重ねた状態 */
.drawer-menu-carousel_prev:hover,
.drawer-menu-carousel_next:hover{
background:#0959d9; /* ホバー時の背景色 */
}
/* =========================================
インジケーター
========================================= */
/* 丸いインジケーターを並べるエリア */
.drawer-menu-carousel_dots{
display:flex; /* インジケーターを横並びにする */
justify-content:center; /* インジケーターを左右中央へ配置する */
gap:8px; /* インジケーター同士の間隔 */
margin:14px 0 0; /* 上側14pxの余白 */
}
/* 各インジケーター */
.drawer-menu-carousel_dot{
width:10px; /* インジケーターの横幅 */
height:10px; /* インジケーターの高さ */
padding:0; /* ブラウザ標準の内側余白を削除する */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:50%; /* 円形にする */
background:#cbd5e1; /* 未選択時の背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
}
/* 選択中のインジケーター */
.drawer-menu-carousel_dot.is-active{
background:#0b6bff; /* 選択中の背景色 */
}
/* =========================================
閉じるボタン
========================================= */
/* ドロワーメニューを閉じるボタン */
.drawer-menu-carousel_close{
width:100%; /* ドロワーメニューの横幅いっぱいに表示する */
min-height:48px; /* タップしやすい最小高さ */
margin:24px 0 0; /* 上側24pxの余白 */
padding:12px 20px; /* 上下12px・左右20pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除する */
border-radius:8px; /* ボタンの角丸 */
background:#111827; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更する */
transition:background .2s ease; /* 0.2秒で背景色を変化させる */
}
/* 閉じるボタンへマウスを重ねた状態 */
.drawer-menu-carousel_close:hover{
background:#374151; /* ホバー時の背景色 */
}
/* =========================================
ドロワーメニューの表示アニメーション
========================================= */
@keyframes drawer-menu-carousel-slide{
/* アニメーション開始時 */
from{
opacity:0; /* 完全に透明な状態から開始する */
transform:translateX(-100%); /* 画面左側の外から開始する */
}
/* アニメーション終了時 */
to{
opacity:1; /* 完全に表示する */
transform:translateX(0); /* 元の位置へ移動する */
}
}
/* =========================================
スマートフォン対応
========================================= */
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小する */
}
/* スマートフォン用の案内エリア */
.drawer-menu-carousel_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小する */
padding:24px 18px; /* 内側余白を縮小する */
}
/* スマートフォン用の開くボタン */
.drawer-menu-carousel_open{
width:100%; /* ボタンを案内エリアの横幅いっぱいに表示する */
}
/* スマートフォン用のドロワーメニュー */
.drawer-menu-carousel_drawer{
width:100%; /* ドロワーメニューを画面幅いっぱいに表示する */
max-width:100%; /* 最大横幅を画面幅に合わせる */
padding:24px 20px; /* 内側余白を調整する */
}
/* スマートフォン用のスライド画像 */
.drawer-menu-carousel_slide img{
height:190px; /* 画面幅いっぱいの表示に合わせて画像を高くする */
}
}
// =========================================
// 使用する要素を取得
// =========================================
// ドロワーメニューを開くボタンを取得
const drawerMenuCarouselOpen=document.querySelector(
"[data-drawer-menu-carousel-open]"
);
// ドロワーメニューを閉じるボタンを取得
const drawerMenuCarouselClose=document.querySelector(
"[data-drawer-menu-carousel-close]"
);
// 背景オーバーレイを取得
const drawerMenuCarouselOverlay=document.querySelector(
"[data-drawer-menu-carousel-overlay]"
);
// カルーセルの移動エリアを取得
const drawerMenuCarouselTrack=document.querySelector(
"[data-drawer-menu-carousel-track]"
);
// 前へボタンを取得
const drawerMenuCarouselPrev=document.querySelector(
"[data-drawer-menu-carousel-prev]"
);
// 次へボタンを取得
const drawerMenuCarouselNext=document.querySelector(
"[data-drawer-menu-carousel-next]"
);
// インジケーターを取得
const drawerMenuCarouselDots=document.querySelectorAll(
"[data-drawer-menu-carousel-dot]"
);
// スライド枚数を取得
const drawerMenuCarouselTotal=
drawerMenuCarouselDots.length;
// 現在表示中のスライド番号
let drawerMenuCarouselIndex=0;
// =========================================
// カルーセル表示
// =========================================
// 指定したスライドを表示する
function showDrawerMenuCarousel(index){
// スライドを横方向へ移動する
drawerMenuCarouselTrack.style.transform=
"translateX(-"+(index*100)+"%)";
// すべてのインジケーターを未選択へ変更
drawerMenuCarouselDots.forEach(function(dot){
dot.classList.remove("is-active");
});
// 現在のインジケーターを選択状態にする
drawerMenuCarouselDots[index].classList.add(
"is-active"
);
}
// =========================================
// ドロワーメニューを開く
// =========================================
// 開くボタンをクリックしたとき
drawerMenuCarouselOpen.addEventListener(
"click",
function(){
// ドロワーメニューを表示する
drawerMenuCarouselOverlay.classList.add(
"is-active"
);
// 支援技術へ表示状態を伝える
drawerMenuCarouselOverlay.setAttribute(
"aria-hidden",
"false"
);
}
);
// =========================================
// ドロワーメニューを閉じる
// =========================================
// ドロワーメニューを閉じる関数
function closeDrawerMenuCarousel(){
// ドロワーメニューを非表示にする
drawerMenuCarouselOverlay.classList.remove(
"is-active"
);
// 支援技術へ非表示状態を伝える
drawerMenuCarouselOverlay.setAttribute(
"aria-hidden",
"true"
);
}
// 閉じるボタンをクリックしたとき
drawerMenuCarouselClose.addEventListener(
"click",
closeDrawerMenuCarousel
);
// 背景をクリックしたとき
drawerMenuCarouselOverlay.addEventListener(
"click",
function(event){
// 背景だけクリックした場合
if(event.target===drawerMenuCarouselOverlay){
// ドロワーメニューを閉じる
closeDrawerMenuCarousel();
}
}
);
// =========================================
// 次へボタン
// =========================================
// 次へボタンをクリックしたとき
drawerMenuCarouselNext.addEventListener(
"click",
function(){
// 次のスライドへ進む
drawerMenuCarouselIndex++;
// 最後まで進んだら最初へ戻る
if(drawerMenuCarouselIndex>=drawerMenuCarouselTotal){
drawerMenuCarouselIndex=0;
}
// スライドを表示する
showDrawerMenuCarousel(
drawerMenuCarouselIndex
);
}
);
// =========================================
// 前へボタン
// =========================================
// 前へボタンをクリックしたとき
drawerMenuCarouselPrev.addEventListener(
"click",
function(){
// 前のスライドへ戻る
drawerMenuCarouselIndex--;
// 最初より前なら最後へ移動する
if(drawerMenuCarouselIndex<0){
drawerMenuCarouselIndex=
drawerMenuCarouselTotal-1;
}
// スライドを表示する
showDrawerMenuCarousel(
drawerMenuCarouselIndex
);
}
);
// =========================================
// インジケータークリック
// =========================================
// 各インジケーターへクリック処理を設定
drawerMenuCarouselDots.forEach(function(dot){
dot.addEventListener(
"click",
function(){
// クリックした番号を取得
drawerMenuCarouselIndex=Number(
dot.dataset.drawerMenuCarouselDot
);
// スライドを表示する
showDrawerMenuCarousel(
drawerMenuCarouselIndex
);
}
);
});
// =========================================
// 初期表示
// =========================================
// 最初のスライドを表示する
showDrawerMenuCarousel(0);
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ドロワーメニューを開くと、通常のメニューと画像カルーセルを同時に表示できます。HTMLでレイアウトを作成し、CSSでドロワーメニューとカルーセルのデザインを設定、JavaScriptでドロワーメニューの開閉とカルーセルの切り替えを行っています。
カルーセルには画像と説明文を表示できるため、おすすめ記事、新着情報、キャンペーン、商品紹介などを目立たせることができます。メニュー操作とコンテンツ紹介を1つのドロワーメニューへまとめられるため、情報量の多いサイトでも使いやすい構成です。
メニュー項目、画像、説明文、リンク先URL、ドロワーメニューの横幅、カルーセル画像の高さ、ボタン色、余白、影、表示アニメーションの速度などを自由に変更できます。画面幅640px以下ではスマートフォン向けレイアウトへ切り替わるため、スマートフォン・タブレット・PCで利用できます。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── slide1.jpg
├── slide2.jpg
└── slide3.jpg
各ファイルの役割
index.html
ドロワーメニュー全体の構造を定義しています。メニュー項目、画像、見出し、説明文、リンク先URLを編集できます。カルーセルへ画像を追加したい場合は、スライドとインジケーターを追加してください。
style.css
ドロワーメニュー、カルーセル、画像、前へ・次へボタン、インジケーター、背景オーバーレイ、表示アニメーション、レスポンシブ表示を設定しています。配色、横幅、画像サイズ、余白、角丸、影、表示速度などを変更できます。
script.js
ドロワーメニューの開閉処理とカルーセルの切り替え処理を行っています。前へ・次へボタンやインジケーターの動作を変更できます。
imagesフォルダ
カルーセルで表示する画像を保存します。slide1.jpg、slide2.jpg、slide3.jpgをご自身で用意した画像へ差し替えるだけで利用できます。
設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを配置し、画像はsample/images/へ保存してください。
sample/index.htmlをブラウザで開くとサンプルを確認できます。「メニューを開く」をクリックするとドロワーメニューが表示され、前へ・次へボタンまたは丸いインジケーターをクリックするとカルーセルを切り替えられます。
カスタマイズできる内容
index.htmlでは、メニュー項目、画像、見出し、説明文、リンク先URL、ボタンの文字を変更できます。画像やスライドを追加・削除してカルーセルの内容を自由に編集できます。
style.cssでは、ドロワーメニューの横幅、画像の高さ、ボタン色、背景色、文字サイズ、余白、角丸、影、背景オーバーレイの暗さ、アニメーション速度を変更できます。
script.jsでは、カルーセルの切り替え処理やドロワーメニューの開閉処理を変更できます。
数値調整
style.cssのwidth:380px;はドロワーメニューの横幅です。値を大きくすると広くなり、小さくすると狭くなります。
height:170px;はカルーセル画像の高さです。値を大きくすると画像が高くなり、小さくするとコンパクトになります。
padding:24px;はドロワーメニュー内側の余白です。値を変更すると表示間隔が変わります。
background:rgba(0,0,0,.45);の.45は背景の暗さです。値を大きくすると暗くなり、小さくすると背景が透けます。
animation:drawer-menu-carousel-slide .35s ease forwards;の.35sはドロワーメニューの表示アニメーション時間です。値を大きくするとゆっくり表示され、小さくすると速く表示されます。
transition:transform .35s ease;の.35sはカルーセルの切り替え速度です。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
style.cssではwidth:100%、max-width:100%、overflow-y:auto、@media screen and (max-width:640px)を使用してレスポンシブ対応しています。
スマートフォンではドロワーメニューを画面幅いっぱいに表示し、カルーセル画像やボタンも画面サイズに合わせて調整されます。スマートフォン・タブレット・PCで快適に利用できます。
コメント