practice

　　　　

<html lang="ja">
<meta charset="utf-8">

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"rel="stylesheet">
<style>
@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);
*{margin:0;
padding:0;
box-sizing:border-box;
font-family:"Inter", sans-serif;
--shadow:rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
--color:#123456;
--gap:0.5rem;
--radius:5px;}
body{margin:2rem;
background-color:#abcdef;
font-size:0.9rem;
color:black;}
.ボタン{background-color:white;
display:flex;
align-items:center;
justify-content:flex-start;
column-gap:var(--gap);
padding:0.6rem;
cursor:pointer;
border-radius:var(--radius);
border:none;
box-shadow:var(--shadow);
position:relative;}
.bx{font-size:1.5rem;}
.dropdown{position:absolute;
width:250px;
box-shadow:var(--shadow);
border-radius:var(--radius);
margin-top:0.4rem;
background:white;
visibility:hidden;
opacity:0;
transform:translateY(2rem);
transition:all 1s cubic-bezier(0.2,1,0.5,1);}
.dropdown a{display:flex;
align-items:center;
column-gap:var(--gap);
padding:0.8rem 1rem;
text-decoration:none;
color:black;}
.dropdown a:hover{background-color:var(--color);
color:white;}
.表示{visibility:visible;
opacity:1;
transform:translateY(0rem);}
.矢印{transform:rotate(180deg);
transition:0.2s ease;}
</style>

<div>
<button class="ボタン"id="目印">音符 / 休符<i class="bx bx-chevron-down"id="矢印"></i></button>
<div class="dropdown"id="dropdown">
<a href="https://www.アップロードハウス.com/STUDY_JS_folder/STUDY_JS_2023/STUDY_JS_015/STUDY_JS_015_01.html"><i class="bx bx-plus-circle"></i>基本の音符</a>
<a href="https://www.アップロードハウス.com/STUDY_JS_folder/STUDY_JS_2023/STUDY_JS_015/STUDY_JS_015_01.html#B">
<i class="bx bx-book"></i>音部記号 / 調号 [Result]</a>
<a href="https://www.アップロードハウス.com/STUDY_JS_folder/STUDY_JS_2023/STUDY_JS_015/STUDY_JS_015_02.html">
<i class="bx bx-folder"></i>五線の長さ</a>
<a href="https://www.アップロードハウス.com/STUDY_JS_folder/STUDY_JS_2023/STUDY_JS_015/STUDY_JS_015_02.html#B">
<i class="bx bx-user"></i>臨時記号 / 縦線 [Result]</a>
<a href="https://www.アップロードハウス.com/STUDY_JS_folder/STUDY_JS_2023/STUDY_JS_015/STUDY_JS_015_03.html">
<i class="bx bx-bell"></i>二段譜表 / 三段譜表</a>
<a href="https://www.アップロードハウス.com/STUDY_JS_folder/STUDY_JS_2023/STUDY_JS_015/STUDY_JS_015_03.html#B">
<i class="bx bx-cog"></i>四段譜表 [Result]</a>
</div>
</div>

<script>
どろっぷ_ぼたん=document.getElementById("目印");
どろっぷ_めにゅー=document.getElementById("dropdown");
向き=document.getElementById("矢印");
どろっぷ_向き=function()
{どろっぷ_めにゅー.classList.toggle("表示");
向き.classList.toggle("矢印");};
どろっぷ_ぼたん.addEventListener("click",function(e)
{e.stopPropagation();
どろっぷ_向き();});
document.documentElement.addEventListener("click",function()
{if(どろっぷ_めにゅー.classList.contains("表示"))
{どろっぷ_向き();}});
</script>

</html>