<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>折りたたみメニュー</title>
<script>
//初期化、メニューを最初はすべて閉じておく
function init(){
change_display('no1','none');
change_display('no2','none');
}
//指定された場所(id)の表示を指定された表示形式(display)に変更する☆
function change_display(id,display) {
var element = document.getElementById(id);
element.style.display = '';
}
//非表示(display:none)なら表示(display;'')
//表示なら非表示に切り替える
//ついでにマウスカーソルの形も変える
function toggle_display(id) {
var element = document.getElementById(id);
if(element.style.display == 'none') {
change_display(id,'');
change_cursor('pointer');
} else {
change_display(id,'none');
change_cursor('auto');
}
}
//マウスカーソルの形を指定のものに変える
function change_cursor(cursor) {
var element = document.getElementsByTagName('body')[0];
element.style.cursor = cursor;
}
</script>
<style>
dl{
width:8em;
padding:0 1em;
}
dt{
width:10em;
margin-left:-1em;
padding-left:1em;
background:#4169e1;
color:white;
}
dd{
position:relative;
}
ul[id]{
width:20em;
position:absolute;
top:-1em;
left:-3.5em;
z-index:1;
background:rgba(65,105,255,0.9);
color:white;
}
ul[id] li{
padding-right:1em;
}
#content{
z-index:0;
background:#FFF;
position:relative;
top:-2em;
}
</style>
</head>
<body onload="init()">
<h1>折りたたみメニュー</h1>
<div style="display:flex">
<!--クリックして切り替わるが、マウスを重ねるだけでメニューが展開される方が使いやすいかな…☆-->
<dl onclick="toggle_display('no1');">
<dt>メニュー</dt>
<dd>
<ul id="no1">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</dd>
</dl>
<dl onclick="toggle_display('no2');">
<dt>メニュー</dt>
<dd>
<ul id="no2">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</dd>
</dl>
<dl onclick="toggle_display('no3');">
<dt>メニュー</dt>
<dd>
<ul id="no3">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</dd>
</dl>
</div>
<div id="content">
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
</div>
</body>
</html>