スマホサイト用トグルボタン自作メモ

javascriptが心底苦手で、今まではスマホサイト用のトグルボタンは出来合いのものを流用して、後からカスタマイズ等するときに手出しできなかったりしていたが、ようやく自作してそれらしいものが出来るようになったので、近い将来に改修する際に「???・・・」となっているであろう自分への覚書。

HTML部分

<p><a href="#link" id="toggle01">メニュー表示</a></p>
<div class="menu01">
<ul>
 <li>menu01</li>
 <li>menu02</li>
 <li>menu03</li>
 <li>menu04</li>
</ul>
<p><a href="#link" id="close01">閉じる</a></p>
</div>
<p>これはサンプルテキストです</p>/* Your code... */

何の変哲もないメニュー用の「ul」と「li」

これをjavascriptで表示したり、隠したりする。実際に表示、非表示にするのは「div class="menu01"」のボックス部分

CSS部分

.menu01 ul {
}
.menu01 ul {
	width: 300px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	background: #00F;
}
.menu01 ul li {
	background: #F00;
	padding: 20px;
	margin: 0px 0px 2px;
}

こちらも何の変哲もないCSSコード

一つだけ注意点として「ul」(表示・非表示するボックス)の高さを指定しないとギクシャクした動きになる

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(function(){
	$(".menu01").toggle();
	$("#toggle01").click(function(){
		$(".menu01").slideToggle();
	});
	$("#close01").click(function(){
		$(".menu01").slideUp();
	});
});
</script>

1行目はjQueryのおまじない

4行目は「div class=”menu01″」の初期設定を非表示にするおまじない

5-7行目は「<a id=”toggle01″ href=”#link”>メニュー表示</a>」が
クリックされたときにスライドして表示させる設定
再度クリックするとスライドして非表示になる

8-10行目は「<a id=”close01″ href=”#link”>閉じる</a>」が
クリックされたときに「div class=”menu01″」を
スライドして非表示にする設定。閉じるのみ

あとは「メニュー表示」のリンク部分を「トグルボタン」の画像にする

CSSの「position: absolute;」等を使ってボタンの位置調整、コンテンツの上に重なるように表示する等の処理を必要に応じて加える

参考サイト

jQuery 要素を表示/非表示にする(toggle)