2021・07・08
＊画面右にメニュー開閉ボタンを配置したスライドメニューのサンプルです＊
開閉式のメニューは通常、画面の上部か下部に配置されることが多いです。
メニューボタンを画面の上端・下端に寄せることで、メインコンテンツの表示の邪魔にならないというメリットは大きいものの、位置的にスマホでは指が届きづらく、押しにくいというデメリットもあります。
そこで今回は、メニューの開閉ボタンを画面の右端に設置したサンプルを作ってみました。
画面右の「MENU」ボタンをクリックすると、メニューが現れます。
CSSでクリップしたり、アニメーションをつけたりもしています。
なお、クリックイベントはJavaScriptで制御しています。
主な使用機能：CSS・JavaScript
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
margin-block-start: 0;
margin-block-end: 0;
font-family: monospace;
box-sizing: border-box;
padding-inline-start: 0px;
}
.sampkle_slide_menubox {
transition: all .8s;
}
.sampkle_slide_menubox.sample_active1 {
position: fixed;
top:0;
height: 100%;
width: 100%;
background-color: rgba(71, 71, 71, 0.45);
overflow: hidden;
transition: all .8s;
}
.sampkle_slide_box {
position: fixed;
background-color: rgb(185, 0, 0);
color: white;
height: 100vh;
width: 80vw;
top: 0;
right: -100vw;
transition: all .8s;
}
.sampkle_slide_box.sample_active1 {
top: 0;
right: 0;
}
.sample_slide_tub {
height: 150px;
width: 50px;
background-image: repeating-linear-gradient(red, red 2px,white 2px, white 4px);
position: fixed;
z-index: 10;
right: 0;
top: calc(50% - 75px);
clip-path: polygon(0 10%, 30% 0%, 100% 0%, 100% 100%, 30% 100%, 0% 90%);
cursor: pointer;
transition: all .3s;
}
.sample_slide_tub:hover {
height: 160px;
width: 60px;
font-size: 1.3rem;
}
.sample_menu_title {
writing-mode: vertical-rl;
font-family: sans-serif;
width: fit-content;
position: absolute;
right: 0;
left: 0;
top: 50%;
margin: auto;
transform: translate(0, -50%);
letter-spacing: 2px;
font-weight: bold;
text-shadow:
2px 2px 2px black,
-2px -2px 2px black,
2px -2px 2px black,
-2px 2px 2px black,
0px 2px 2px black,
2px 0px 2px black,
0px -2px 2px black,
-2px 0px 2px black;
}
.sample_menu_lists {
width: 80%;
margin: 1rem auto;
}
.sample_menu_parent {
font-size: 1.5rem;
list-style: none;
width: auto;
margin:2rem 2rem 1rem 0;
text-align: center;
background-color: white;
color: black;
padding:20px 10px 20px 0;
border: dashed;
box-shadow: 0 0 0 4px white;
border-radius: 6px;
background-image: linear-gradient(transparent 50%, yellow 50%);
background-size: 0 100%;
background-repeat: no-repeat;
cursor: pointer;
transition: all .5s;
}
.sample_menu_parent:hover {
background-size: 100% 100%;
}
.sample_menu_parent::before {
content: '';
background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/07/nico.png);
padding: 10px;
width: 20px;
height: 20px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
position: relative;
top: 0px;
bottom: 0px;
margin: auto;
margin-right: .5rem;
}
.sample_submenu_right_parent {
position: static;
height: auto;
}
.sample_submenu_right_parent.sample_active1 {
height: auto;
}
.sample_submenu_right {
position: absolute;
width: 80%;
font-size: 1rem;
opacity: 0;
visibility: hidden;
transition: all .5s;
position: relative;
top: -5rem;
list-style-position: inside;
}
.sample_submenu_right.sample_active1 {
top:0;
height: auto;
padding: 10px;
border-bottom: dashed;
opacity: 1;
visibility: visible;
cursor: pointer;
}
.sample_submenu_right.sample_active1:hover {
font-weight: bold;
color: lightblue;
}
.sample_menu_lists2 {
position: relative;
top: -3.5rem;
transition: all .5s;
}
.sample_menu_lists2.menu1sample_active1 {
top: 0;
}
.sample_menu_parent2 {
background-image: linear-gradient(transparent 50%, lightgreen 50%);
position: relative;
z-index: 10;
}
@media screen and (max-width: 800px) {
.sample_slide_tub {
transform-origin: center right;
transform: scale(.6);
}
}
</style>
</head>
<body>
<div class="sampkle_slide_menubox">
<div class="sampkle_slide_box" tabindex="0">
<div class="sample_slide_tub">
<p class="sample_menu_title">MENU</p>
</div>
<ul class="sample_menu_lists sample_menu_lists1">
<li class="sample_menu_parent sample_menu_parent1">MENU１</li>
<div class="sample_submenu_right_parent">
<li class="sample_submenu_right sample_submenu_right1">HOME</li>
<li class="sample_submenu_right sample_submenu_right1">NEWS</li>
<li class="sample_submenu_right sample_submenu_right1">ABOUT</li>
</div>
</ul>
<ul class="sample_menu_lists sample_menu_lists2">
<li class="sample_menu_parent sample_menu_parent2">MENU２</li>
<li class="sample_submenu_right sample_submenu_right2">CONTACT</li>
<li class="sample_submenu_right sample_submenu_right2">REQRUIT</li>
</ul>
</div>
</div>
<script type="text/javascript" defer>
{
const sample_slide_tub = document.querySelector('.sample_slide_tub');
const sampkle_slide_box = document.querySelector('.sampkle_slide_box');
const sampkle_slide_menubox = document.querySelector('.sampkle_slide_menubox');
const sample_menu_title = document.querySelector('.sample_menu_title');
const sample_menu_parent1 = document.querySelector('.sample_menu_parent1');
const sample_menu_parent2 = document.querySelector('.sample_menu_parent2');
const sample_submenu_right1s = document.querySelectorAll('.sample_submenu_right1');
const sample_submenu_right2s = document.querySelectorAll('.sample_submenu_right2');
const sample_menu_lists2 = document.querySelector('.sample_menu_lists2');
sample_slide_tub.addEventListener('click', () => {
sampkle_slide_box.classList.toggle('sample_active1');
sampkle_slide_menubox.classList.toggle('sample_active1');
sample_menu_title.classList.toggle('sample_active1');
if (sample_menu_title.classList.contains('sample_active1')) {
sample_menu_title.textContent = 'CLOSE';
}
else {
sample_menu_title.textContent = 'MENU';
}
});
sample_menu_parent1.addEventListener('click', ()=> {
sample_menu_lists2.classList.toggle('menu1sample_active1');
for (var sample_submenu_right1 of sample_submenu_right1s) {
sample_submenu_right1.classList.toggle('sample_active1');
}
});
sample_menu_parent2.addEventListener('click', ()=> {
for (var sample_submenu_right2 of sample_submenu_right2s) {
sample_submenu_right2.classList.toggle('sample_active1');
}
});
}
</script>
</body>
</html>