プログラミング初心者が、JavaScriptでアコーディオンメニュー作ってみました。
素のJavaScriptです。
朝、投稿したものに、アニメーションをつけました。
index.html
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li class="color-blue">
<div class="main">メンズファッション</div>
<ul class="subs">
<li><a href="test.html">Tシャツ</a></li>
<li><a href="test.html">ポロシャツ</a></li>
<li><a href="test.html">ワイシャツ</a></li>
<li><a href="test.html">ベスト</a></li>
</ul>
</li>
<li class="color-red">
<div class="main">メンズスーツ</div>
<ul class="subs">
<li><a href="test.html">シングルスーツ</a></li>
<li><a href="test.html">ダブルスーツ</a></li>
<li><a href="test.html">オーダースーツ</a></li>
<li><a href="test.html">その他のスーツ</a></li>
</ul>
</li>
<li class="color-yellow">
<div class="main">アウトドアウェア</div>
<ul class="subs">
<li><a href="test.html">トップス</a></li>
<li><a href="test.html">パンツ</a></li>
<li><a href="test.html">インナー</a></li>
</ul>
</li>
<li class="color-green">
<div class="main">雑貨・小物</div>
<ul class="subs">
<li><a href="test.html">メンズベルト</a></li>
<li><a href="test.html">ネクタイ</a></li>
<li><a href="test.html">ハンカチ</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="./script.js"></script>
</body>
style.css
@charset "UTF-8";
/* ------- base ------- */
body {
background: #FFF;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 14px;
color: #FFF;
}
body, ul, li, div {
margin: 0;
padding: 0;
}
img {
border: 0;
}
a {
text-decoration: none;
}
/* ------- wrapper ------- */
#wrapper {
width: 740px;
margin: 30px auto;
}
/* ------- nav ------- */
#nav {
width: 190px;
}
#nav li {
list-style: none;
}
div.main {
height: 60px;
line-height: 60px;
text-indent: 25px;
background-color: #3FC6F3;
border-right: 10px solid #0D9BE5;
cursor: pointer;
}
ul.subs li a {
display: block;
height: 40px;
line-height: 40px;
text-indent: 25px;
background-color: #F5F5F5;
border-right: 10px solid #0D9BE5;
font-size: 12px;
color: #164158;
}
/* ------- 色の指定 ------- */
/* メインメニュー */
li.color-blue div.main {
background-color: #8ac6d1;
border-right: 10px solid #204969;
}
li.color-red div.main {
background-color: #FF625F;
border-right: 10px solid #e41749;
}
li.color-yellow div.main {
background-color: #FEBD01;
border-right: 10px solid #FF8D00;
}
li.color-green div.main {
background-color: #248888;
border-right: 10px solid #1f640a;
}
/* サブメニュー */
li.color-blue ul.subs li a {
border-right: 10px solid #204969;
color: #0D9BE5;
}
li.color-red ul.subs li a {
border-right: 10px solid #e41749;
color: #FD2621;
}
li.color-yellow ul.subs li a {
border-right: 10px solid #FF8D00;
color: #FF8D00;
}
li.color-green ul.subs li a {
border-right: 10px solid #1f640a;
color: #15B59B;
}
li.color-blue ul.subs li a:hover {
background-color: #8ac6d1;
color: #FFF;
}
li.color-red ul.subs li a:hover {
background-color: #FF625F;
color: #FFF;
}
li.color-yellow ul.subs li a:hover {
background-color: #FEBD01;
color: #FFF;
}
li.color-green ul.subs li a:hover {
background-color: #248888;
color: #FFF;
}
/* 追加 */
.subs {
height: 0;
overflow: hidden;
transition: height .4s ease;
}
script.js
'use strict';
function accordion(){
const accordionTrigger = document.querySelectorAll('.main');
for(let i = 0; i < accordionTrigger.length; i++) {
accordionTrigger.item(i).addEventListener('click', (e) => {
let currentElement = e.currentTarget;
let accordionTarget = currentElement.nextElementSibling;
if(accordionTarget.style.height){
accordionTarget.style.height = null;
} else {
accordionTarget.style.height = accordionTarget.scrollHeight + 'px';
}
});
}
}
accordion();