数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生～大学入試までの算数と数学の問題と詳しい解説をしていきます。

jQueryで開閉式メニューを作ってみた

jQuery

～jQueryで開閉式メニューを作る方法～


今回はjavascriptのライブラリであるJQueryを使って開閉式メニューを作る方法を詳しく説明していきたいと思います。


レベル1 headタグの中にjQueryを使うためのURLを入れる

まずjQueryを使うためにはあるURLを入力しないといけません。

はてなブログでは設定→詳細設定をクリックして下の方にある<head>要素にメタデータを追加という所に次のように入力します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

これでjQueryが使える準備ができました。


レベル2 親メニューのスタイルシートを用意する

見出しのスタイルシートを自動で作れる自作のツールを使って作ります。

https://purechan22.hatenablog.com/entry/2022/11/17/155515

目次を開く

できました！


<p class="midasi5">目次を開く</h2>

<style>
p.midasi5{
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: oldlace;padding: 10px;
width: 200px;
font-size: 22px;
font-weight: bold;
text-shadow:none;
}

p.midasi5:before{
content: '＋';
font-size: 16px;
color: goldenrod;
margin-right: 8px;}
</style>

レベル3 目次部分を作る

今回は目次なのでこの部分はリストで文字だけにしてみます。

ナビゲータータグnavで全体を囲んでul,uiタグでリスト化します。

navは非表示にして(display:none;)にしてjQueryで表示にします。

<nav>
	<ul>
		<li>目次1</li>
		<li>目次2</li>
		<li>目次3</li>
		<li>目次4</li>
		<li>目次5</li>
	</ul>
</nav>

nav{ 
display: none; 
}

レベル4 jQueryのコードを書く

親メニューのCSSのクラスmidasi5をクリックすると jQueryで用意されているメニューの開閉イベントが起きるようにします。

	$(function(){
		$('.midasi5').click(function(){
//midasi5がクリックされた時の処理内容を書く
		});
	});

その時navタグを開きjQueryで用意された関数slideToggle()を使ってメニューの開閉をする

$(this).next('nav').slideToggle();

めちゃめちゃ便利ですね！

まとめて書くと次のようになります。

<script>
	$(function(){
		$('.midasi5').click(function(){
			$(this).next('nav').slideToggle();
		});
	});
</script>

ちなみにthisが出てきたので何が入ってるか調べてみると

[object HTMLParagraphElement]

と出てきたのでおそらくクラスmidasi5の内容が入ってるのでしょう

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

目次を開く

ここまでのHTML,CSS,javascriptをまとめると次のようになります。

<p class="midasi5">目次を開く</h2>
<nav>
	<ul>
		<li>目次1</li>
		<li>目次2</li>
		<li>目次3</li>
		<li>目次4</li>
		<li>目次5</li>
	</ul>
</nav>

<style>
nav{ 
display: none; 
}

p.midasi5{
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: oldlace;padding: 10px;
width: 200px;
font-size: 22px;
font-weight: bold;
text-shadow:none;
}

p.midasi5:before{
content: '＋';
font-size: 16px;
color: goldenrod;
margin-right: 8px;}
</style>

<script>
	$(function(){
		$('.midasi5').click(function(){
			$(this).next('nav').slideToggle();
		});
	});
</script>

レベル5 親メニューに触れただけで開くようにする

さっきはクリックしたら目次が開閉したけど、今度は親メニューに触れただけで目次が開くようにしてみます。

専門用語ではホバー(hover)といいます。

修正箇所はたった一つでclickをhoverに変えるだけです。

・修正前

$('.midasi5').click(function(){

・修正後

$('.midasi5').hover(function(){

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

目次を開く

これで親メニューに触れただけで目次が開くようになりました！

でもこっちだと親メニューから離れたら目次が閉じてしまいます。


レベル6 開いてる時と閉じてる時で表示を変える

目次を開いてる時も閉じてる時も＋の記号を使っていましたが、開いてるときだけ－の記号に変えてみます。

CSSに次のように追加します。

midasi5クラスの後に.activeを加えてcontentを－に変えるだけです。

p.midasi5.active:before{
content: '－';
font-size: 16px;
color: goldenrod;
margin-right: 8px;}

またjavascriptの方にも次のように追加します。

toggleはクラスを変えたりする暗号なのでtoggleClassでactiveに変えているんですね。

$(this).toggleClass('active');

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

目次を開く

レベル7 全部をまとめる

ここまでのHTML,CSS,javascriptをまとめておきます。

<nav>
	<ul>
		<li>目次1</li>
		<li>目次2</li>
		<li>目次3</li>
		<li>目次4</li>
		<li>目次5</li>
	</ul>
</nav>

<sytle>
nav{ 
display: none; 
}

p.midasi5{
line-height:1.2;
text-align:center;
vertical-align: middle;
background-color: oldlace;padding: 10px;
width: 200px;
font-size: 22px;
font-weight: bold;
text-shadow:none;
}

p.midasi5:before{
content: '＋';
font-size: 16px;
color: goldenrod;
margin-right: 8px;}



p.midasi5.active:before{
content: '－';
font-size: 16px;
color: goldenrod;
margin-right: 8px;}
</style>

//クリックでメニューを開きたいときはこっち
<script>
	$(function(){
		$('.midasi5').click(function(){
			$(this).toggleClass('active');
			$(this).next('nav').slideToggle();
		});

	});
</script>

//触れただけでメニューを開きたい時はこっち
<script>
	$(function(){
		$('.midasi5').hover(function(){
			$(this).toggleClass('active');
			$(this).next('nav').slideToggle();
		});

	});
</script>