かなこと仲良く数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。普通の生徒はコメント欄で質問し放題です! 特別生徒は一名募集していて毎週日曜日に専用の問題が出て、ツイッターで質問し放題です笑

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;
}

見た目はこんな感じになります。

子メニュー1

子メニュー2

子メニュー3

レベル2 子メニューの表示を非表示に変える

一度子メニューの表示を非表示に変えます。

CSSにdisplay:none;というのを追加します。

p.komenu{
display:none;
}

すると見た目は次のように変わります。

いったん隠れるって面白いですよね。

子メニュー1

子メニュー2

子メニュー3


レベル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>

子メニュー1

子メニュー2

子メニュー3


レベル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>

すると見た目は次のようになります。

子メニュー1

子メニュー2

子メニュー3

うまくいきました!

あとは親メニューに+アイコンなんかをつけておくとよりよさそうです!