Menu
페이지 정보
본문
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックでメニューを開く</title>
<style>
#menu {
display: none;
position: absolute;
top: 40px;
left: 10px;
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
padding: 5px 10px;
cursor: pointer;
}
#menu ul li:hover {
background-color: #eee;
}
</style>
</head>
<body>
<button id="menuButton">メニューを開く</button>
<div id="menu">
<ul>
<li>メニュー項目1</li>
<li>メニュー項目2</li>
<li>メニュー項目3</li>
</ul>
</div>
<script>
const button = document.getElementById('menuButton');
const menu = document.getElementById('menu');
button.addEventListener('click', () => {
// トグル表示
if (menu.style.display === 'none' || menu.style.display === '') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
// メニュー外クリックで閉じる
document.addEventListener('click', (event) => {
if (!menu.contains(event.target) && event.target !== button) {
menu.style.display = 'none';
}
});
</script>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックでメニューを開く</title>
<style>
#menu {
display: none;
position: absolute;
top: 40px;
left: 10px;
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
padding: 5px 10px;
cursor: pointer;
}
#menu ul li:hover {
background-color: #eee;
}
</style>
</head>
<body>
<button id="menuButton">メニューを開く</button>
<div id="menu">
<ul>
<li>メニュー項目1</li>
<li>メニュー項目2</li>
<li>メニュー項目3</li>
</ul>
</div>
<script>
const button = document.getElementById('menuButton');
const menu = document.getElementById('menu');
button.addEventListener('click', () => {
// トグル表示
if (menu.style.display === 'none' || menu.style.display === '') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
// メニュー外クリックで閉じる
document.addEventListener('click', (event) => {
if (!menu.contains(event.target) && event.target !== button) {
menu.style.display = 'none';
}
});
</script>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.