JavaScriptで開閉メニューのプログラムを解説【JQuery】
JavaScriptで開閉メニューをJQueryのtoggleを使ってプログラミングする解説です。
この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと
JavaScriptで開閉メニューのプログラミング
JavaScriptで開閉メニューをJQueryのtoggleを使ってプログラミングの解説をします。
開閉メニューは1行で簡単に出来ます！
toggleは、JQueryのメソッドです。対象のHTML要素に対して表示/非表示を簡単に切り替ることが出来ます。
サンプルコード【JavaScriptで開閉メニュー】
JavaScriptで開閉メニューをJQueryのtoggleを使ってプログラミングのサンプルコードから紹介します。
(基本的にコピペで動くと思います。)
今回はクリックイベントなどを簡単に行えるように「JQuery」を使っています。
<html>
<head>
<meta charset="utf-8">
<title>Toggle Sample</title>
<style>
body {
text-align: center;
}
.nav dt {
font-weight: bold;
}
.nav dl {
display: none;
}
</style>
</head>
<body>
<h1>Toggle Sample</h1>
<dl class="nav">
<dt class="menu">menu(1)</dt>
<dl>title(1-1)</dl>
<dl>title(1-2)</dl>
</dl>
<dl class="nav">
<dt class="menu">menu(2)</dt>
<dl>title(2-1)</dl>
<dl>title(2-2)</dl>
</dl>
<button type="button" class="btnToggle">toggle</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.btnToggle').click(function () {
$('.nav').find('dl').slideToggle();
});
$('.menu').click(function () {
$(this).parent('dl').find('dl').slideToggle();
});
});
</script>
</body>
</html>HTML部分の解説【JavaScriptで開閉メニュー】
JavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードのHTML部分から解説をします。
HTMLはシンプルです。
文字コードを指定
HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。
<meta charset="utf-8">metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。
メニュー用リストを作成
メニュー用リストをdlタグで用意します。
<dl class="nav">
<dt class="menu">menu(1)</dt>
<dl>title(1-1)</dl>
<dl>title(1-2)</dl>
</dl>
<dl class="nav">
<dt class="menu">menu(2)</dt>
<dl>title(2-1)</dl>
<dl>title(2-2)</dl>
</dl>
<button type="button" class="btnToggle">toggle</button>JQueryをCDNで読み込む
JavaScriptでボタンイベント定義を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。
CSS部分の解説【JavaScriptで開閉メニュー】
JavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードのCSS部分を解説します。
(JavaScriptのtoggleで表示/非表示が切り替わるようにする)
CSSは見た目の調整程度です。
styleタグを用意してスタイルを定義
スタイルを記述するためにstyleタグを記述します。
<style>
・・・
</style>テキストをセンタリング
テキストをセンタリング表示になるようにスタイルします。
body {
text-align: center;
}メニューを太字
メニューの項目を太字になるようにスタイルします。
.nav dt {
font-weight: bold;
}メニューを非表示
メニューリストのdlタグは表示されないようにスタイルします。
.nav dl {
display: none;
}※JavaScriptでクリック時に表示するようにします。
JavaScript部分の解説【JavaScriptで開閉メニュー】
JavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードのJavaScript部分の解説をします。
JavaScriptは、開閉メニューを1行で出来ちゃうくらいシンプルです。
scriptタグを用意してJavaScriptのプログラムを始める
JavaScriptでプログラムコードを記述するためにscriptタグを記述します。
<script>
・・・
</script>読み込み完了で実行させる
読み込み完了時に実行するように「$(document).ready();」と定義します。
$(document).ready(function () {
});ボタンのクリックイベントを定義
class名が’btnToggle’のボタンにクリックイベントを定義します。
$('.btnToggle').click(function () {
});dlタグをtoggle
CSSで表示しないようにしたdlタグに対してtoggleで表示するようにします。これでメニューが開閉させます。
$('.nav').find('dl').slideToggle();おまけ機能
おまけ機能としてボタン同様にメニューをクリックしてもメニューが開閉するようにします。
メニューのクリックイベントを定義
class名が’menu’のdtタグにクリックイベントを定義します。
$('.menu').click(function () {
});メニューが開閉するようtoggleさせる
dlタグをtoggleでメニューが開閉するようにします。
$(this).parent('dl').find('dl').slideToggle();- $(this)
- thisとは自分を指します
- つまり今回は
- クリックされたメニューのclass名がmenuのdtタグ
- parent('dl’)
- parentは親を指します
- つまり
- class名がmenuのdtタグの親であるdlタグ
- find('dl’)
- dlタグの配下にあるdlタグを検索
- slideToggle()
- toggleさせます
まとめ
今回はJavaScriptで開閉メニューをJQueryのtoggleを使ったサンプルコードの紹介と解説をしました。
開閉メニューはWebページによく使われる技術なので、ぜひチャレンジしてください！
開閉メニューを終えた人へ
開閉メニューのtoggleはWebページでよく使うことがあります。今回のサンプルをカスタマイズして「ボタンクリックですべてのメニューを開閉する」などドンドンと変更してチャレンジしてみてください！
最後まで読んでもらいありがとうございます。
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト