javascriptで開閉式メニューを作ってみた
初心者のjavascript～開閉式メニューに挑戦～
今回はjavascriptで開閉式メニューを作っていきたいと思います。初心者なので逆にめちゃめちゃく詳しいです。
レベル1 親メニューボタンと子メニューボタンの準備
自作の見出しのスタイルシートを自動で作成できるツール
https://purechan22.hatenablog.com/entry/2022/11/17/155515
があるので今回もそれを使っていきたいと思います。
親メニューで一つのCSS、子メニューで一つのCSSにしていきたいと考えてます。
<p class="menu" id="oya">親メニュー</p> <p class="komenu" id=ko1">子メニュー1</p> <p class="komenu" id=ko2">子メニュー2</p> <p class="komenu" id="ko3">子メニュー3</p>
p.menu{
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: lightcyan;
padding: 10px;
width: 200px;
font-size: 20px;
font-weight: bold;
text-shadow:none;
border-bottom: 2px ridge skyblue;
box-shadow: 0 0 6px rgba(0,0,0,0.20);
border-top-left-radius:15px;
}
p.komenu{
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: ivory;padding: 10px;
width: 200px;
font-size: 20px;
font-weight: bold;
text-shadow:none;
border-bottom: 2px ridge skyblue;
box-shadow: 0 0 6px rgba(0,0,0,0.20);
border-top-left-radius:15px;
}
見た目はこんな感じになります。
レベル2 子メニューの表示を非表示に変える
一度子メニューの表示を非表示に変えます。
CSSにdisplay:none;というのを追加します。
p.komenu{
display:none;
}
すると見た目は次のように変わります。
いったん隠れるって面白いですよね。
レベル3 ここでjavascriptの登場です。
ついに本日のメインイベントです。
プログラムで指示を出していきます。
レベル4 CSSを変えるjavascript
CSSをまるっとクラスごと変える場合はtoggleという暗号を使うのですが
少しだけ変える場合は次のように変えることができるんです。
まずはdocument.getElementById('id');で要素を取得して要素.style=("display: block;"とか)で変えることができます。
var elem1 = document.getElementById("ko1");
var elem2 = document.getElementById("ko2");
var elem3 = document.getElementById("ko3");
elem1.style= "display:block;";
elem2.style= "display:block;";
elem3.style= "display:block;";
今回は非表示にした子メニューを表示にするのでdisplay:block;に変えています。
レベル5 親メニュークリック時にイベント発生
何かをクリックしてイベントを発生させる時は
要素.addEventListener('click', function(){
処理内容
});
今回は親メニューをクリックするとイベントを発生させたいので次のように記述します。
oya1 =document.getElementById('oya');
oya1.addEventListener('click', function(){
処理内容
});
レベル6 ここまでをまとめて書く
ここまでのjavascriptをまとめて書くと次のようになります。
<script>
var oya1 =document.getElementById('oya');
oya1.addEventListener('click', function(){
var elem1 = document.getElementById('ko1');
var elem2 = document.getElementById('ko2');
var elem3 = document.getElementById('ko3');
elem1.style= "display:block;";
elem2.style= "display:block;";
elem3.style= "display:block;";
});
</script>
レベル7 メニューを開いたり閉じたりする
一応完成ですがこのままでメニューが開いたままになってしまうのでカウント数を作って奇数偶数で場合分けをします。
まずカウントを0にします。
var count=0;
次に親メニューがクリックされるたびにカウントを1ずつ増やします。
count++;
偶数だったら子メニューのdisplay:none;奇数だったら子メニューのdisplay:block;にします。
偶数は2で割れることを利用します。
javascriptでは割った余りに％を使い2で割った余りが0=偶数であることを利用して次のように記述します。
ifはもし～なら、elseはそうでないなら～の意味になります。
if(count %2 ==0){
elem1.style= "display:none;";
elem2.style= "display:none;";
elem3.style= "display:none;";
}
else{
elem1.style= "display:block;";
elem2.style= "display:block;";
elem3.style= "display:block;";
}
これでメニューを開いたり閉じたりできるようになります。
レベル9 メニューを開いたり閉じたりする
ここまでまとめると次のようになります。
<p class="menu" id="oya">親メニュー</p> <p class="komenu" id=ko1">子メニュー1</p> <p class="komenu" id=ko2">子メニュー2</p> <p class="komenu" id="ko3">子メニュー3</p>
p.menu{
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: lightcyan;padding: 10px;
width: 200px;
font-size: 20px;
font-weight: bold;
text-shadow:none;
border-bottom: 2px ridge skyblue;
box-shadow: 0 0 6px rgba(0,0,0,0.20);
border-top-left-radius:15px;
}
p.komenu{
display:none;
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: ivory;
padding: 10px;
width: 200px;
font-size: 20px;
font-weight: bold;
text-shadow:none;
border-bottom: 2px ridge skyblue;
box-shadow: 0 0 6px rgba(0,0,0,0.20);
border-top-left-radius:15px;
}
<script>
var count=0;
var oya1 =document.getElementById('oya');
oya1.addEventListener('click', function(){
count++;
var elem1 = document.getElementById('ko1');
var elem2 = document.getElementById('ko2');
var elem3 = document.getElementById('ko3');
if(count %2 ==0){
elem1.style= "display:none;";
elem2.style= "display:none;";
elem3.style= "display:none;";
}
else{
elem1.style= "display:block;";
elem2.style= "display:block;";
elem3.style= "display:block;";
}
});
</script>
すると見た目は次のようになります。
うまくいきました！
あとは親メニューに＋アイコンなんかをつけておくとよりよさそうです！
