Jsでクリックしたところにリンクが飛ぶようになって、メニューが開き、同じところをクリックすると閉じます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像マップメニュー</title>
<style>/*CSS*/
body {
overflow-x: hidden;
}
.menu {
position: fixed;
top: 0;
right: -250px; /* 初期位置は画面外 */
width: 250px;
height: 100%
background-color: #333;
color: white;
transition: right 0.3s ease;/*right: 変化させるプロパティ
0.3s: アニメーションの所要時間（0.3秒）
ease: アニメーションの速度の変化（最初は遅く、途中で速く、最後は遅くなる）
この設定により、要素が「right」プロパティの値を変更するときに、
スムーズな移動が0.3秒かけて行われます。*/
padding: 20px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}
.menu.active {
right: 0; /* メニューを表示
.menu: 「menu」というクラスを持つ要素を指します。.active: このクラスが追加されると、特定のスタイルが適用されます。right: 0;: 要素の右端を親要素の右端に合わせる（メニューを表示させる）ことを意味します。要するに、「.menu.active」の状態では、メニューが画面に表示される位置に設定されます。 */
}
</style>
</head>
<body>
<h1>画像マップのタイトル</h1>
<img src="22553476.png" usemap="#image-map">
<map name="image-map">
<area alt="Hokkaido" title="あ行か行さ行た行な行は行ま行や行ら行わ行" href="#" coords="1241,170,1003,16,957,52,998,269,944,260,913,336,903,374,924,447,1002,414,949,326,972,336,995,371,1025,327,1121,375,1155,385,1220,280,1319,260,1385,233,1512,1,1304,129,1277,160" shape="poly" onclick="toggleMenu('menu1')">
<area alt="Tohoku" title="Tohoku" href="#" coords="953,468,922,514,901,681,893,801,855,869,948,893,1010,872,1023,732,1061,620,1068,521,1010,452,965,437" shape="poly" onclick="toggleMenu('menu2')">
</map>
<div class="menu" id="menu1">
<h2>北海道メニュー</h2>
<ul>
<li><a href="#" style="color: white;">北海道リンク1</a></li>
<li><a href="#" style="color: white;">北海道リンク2</a></li>
<li><a href="#" style="color: white;">北海道リンク3</a></li>
</ul>
</div>
<div class="menu" id="menu2">
<h2>東北メニュー</h2>
<ul>
<li><a href="#" style="color: white;">東北リンク1</a></li>
<li><a href="#" style="color: white;">東北リンク2</a></li>
<li><a href="#" style="color: white;">東北リンク3</a></li>
</ul>
</div>
<script>
function toggleMenu(menuId) {
#menuId: 操作するメニューのIDを受け取るパラメータ。
const menu = document.getElementById(menuId);
const isActive = menu.classList.contains('active');
#const isActive = menu.classList.contains('active');: メニューが「active」クラスを持っているか確認し、現在の状態を取得します。
// すべてのメニューを非表示にする
const menus = document.querySelectorAll('.menu');
menus.forEach(m => m.classList.remove('active'));
// メニューが非表示の場合は表示する
if (!isActive) {
menu.classList.add('active');
}
}
</script>
</body>
</html>
このコードをJsやCssに分けるとちゃんと起動しないの病む
それにレスポンシブ対応されてないし・・・（するのはあんただよという厳しい突込みが来たのでやりますけど）
Share this content: