(Sample)
サイドバーメニューは、ドロワーメニューとも呼ばれます。
ドロワーメニュー【drawer menu】は、モバイルアプリやWebアプリなどのユーザーインターフェースでよく使用されるデザインの1つで、モバイルデバイスの画面上部や左側に表示される、隠れている状態からスライドして表示されるメニューです。英語の【drawer】には引き出しという意味があります。
ドロワーメニューは、ユーザーがアプリのメインコンテンツから別のセクションやメニューオプションにアクセスするために使用されます。ユーザーがメニューアイコンやスワイプ操作などを使用してドロワーメニューを開くと、画面の一部がスライドアウトして、メニュー項目やナビゲーションオプションが表示されます。ユーザーは、表示されたメニューから必要な項目を選択してアクションを実行することができます。
ドロワーメニューは、メニュー項目やナビゲーションオプションが多い場合や、画面上のスペースを節約したい場合に特に有用です。また、モバイルアプリの一般的なデザインとして、ユーザーがメインコンテンツに集中しながらも、必要なメニューオプションに簡単にアクセスできるようにするためにも利用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドロワーメニューの例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
}
.drawer {
height: 100%;
width: 250px;
position: fixed;
z-index: 1000;
top: 0;
left: -250px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.drawer a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.drawer a:hover {
color: #f1f1f1;
}
.drawer .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#openDrawer {
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myDrawer" class="drawer">
<a href="javascript:void(0)" class="closebtn" onclick="closeDrawer()">×</a>
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
<a href="#">設定</a>
</div>
<span id="openDrawer" onclick="openDrawer()">☰ メニュー</span>
<div class="container mt-5">
<h1>ドロワーメニューの例</h1>
<p>メニューアイコンをクリックしてドロワーメニューを開いてください。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const drawer = document.getElementById('myDrawer');
const openDrawer = document.getElementById('openDrawer');
window.openDrawer = function() {
drawer.style.left = '0';
}
window.closeDrawer = function() {
drawer.style.left = '-250px';
}
});
</script>
</body>
</html>