#author("2020-01-20T11:43:01+09:00;2020-01-20T11:38:48+09:00","default:inoue.ko","inoue.ko")
*CSS Slide Menu
CSSでメニューをトグル表示する例
~
一般にメニューの開閉には [[jQueryのトグル機能>jQuery]] を使いますが、ここでは CSSアニメーションのみでメニューをトグル表示するサンプルを紹介します。ソースはかなりトリッキーなものになるのですが、まずは、[[DEMO>https://koichi-inoue.github.io/SlideMenu/]]をご覧下さい。以下、解説記事を順にご確認下さい。
-''DEMO''：https://koichi-inoue.github.io/Navi-Drawer-CSS/
-''CODE''：https://github.com/koichi-inoue/Navi-Drawer-CSS
~
**使用する属性とセレクタ
このサンプルで使用する属性・セレクタについて概説します。
~
***for 属性
for属性はフォームパーツと要素を関連付けるために用いられる属性で、label 要素に用いられます。
labelタグの書き方は2種類あって、1つはlabelタグで挟む方法、もうひとつがfor属性を使う方法です。
-labelタグで挟む書き方
<label><input type="text" name="name">名前：</label>
-for属性を使う書き方
<label for="text_id">名前：</label>
<input type="text" name="name" id="text_id">
フォーム部品の id を label タグの for 属性に割り当てます。
以下の例では、label要素に for属性をつけることで、同じ内容のid属性を持つ要素と関連付けています。そのままコピペするだけで、あなたのページにGoogle検索ボタンをつけることができます。
<form action="http://www.google.com/search" method="get">
<label for="key">Google: </label>
<input id="key" type="search" name="q">
<input type="submit">
</form>
~
***要素に隣接する要素 +
'' ＋'' という記述は、「当該要素に隣接する要素にスタイルを適用する」という意味で、隣り合う要素同士を関連付けて扱うことが簡単になります。
~
***要素の後にある要素 ~
'' 〜 '' という記述は、「当該要素の後にある要素にスタイルを適用する」という意味です。HTMLの記述順に影響されるので要注意。以下、事例です。
-CSS
h3 ~ p { /* h3の後にある p にのみ適用*/
color:red;
}
-HTML
<p>九州産業大学</p>
<h3>小見出し</h3>
<p>芸術学部</p>
<p>デザイン学科</p>
こう書くと「芸術学部」と「デザイン学科」が赤く表示されます。
'' 〜 '' を使うと例えば、チェックボックスをきっかけとして、チェックボックスとは離れた場所にある要素にスタイルを定義する・・ということができます。
~
***擬似クラス :checked
CSSでボタンのような機能を実現するためには、 :checked 擬似クラスの機能を使う必要があります。[[DEMO>https://koichi-inoue.github.io/SlideMenu/]] では、チェックの有無ごとにスタイルを設定し、これによって、メニューの開閉を行っています。以下の例では、チェクされた方の label の文字（選択肢１または選択肢２）が 赤字になります。
-CSS
input[type=radio]:checked + label {
color: red;
}
-HTML
<form>
<input type="radio" name="btn">
<label>選択肢１</label>
<input type="radio" name="btn">
<label>選択肢２</label>
</form>
補足：[+ label ] という記述は、それに隣接する label 要素を意味します。
~
~
**DEMOのソースコード
以下、[[DEMO>https://koichi-inoue.github.io/SlideMenu/]] の当該部分のソースコードです。
-HTML
<input type="checkbox" id="dummyCheckBox">
<label id="menuButton" for="dummyCheckBox">
<button>MENU</button>
</label>
<nav id="siteNavi">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</nav>
<div id="container">
<h1>Sample Page</h1>
<p>Slide Menu with CSS Animation</p>
</div>
最初の行のチェックボックスはダミーで非表示。その代理を、次のlabel 領域に設定することで、その部分のクリックで、チェックボックスの ON/OFF を切り替えるという仕組みです。
-CSS 要点のみ抜き出して記載しています
#siteNavi {
transform: translateX(-500px); /* 初期位置では画面外へ */
}
：
#dummyCheckBox { /* チェックボックスのダミーは非表示 */
display: none;
}
：
#dummyCheckBox:checked ~ #siteNavi {
transition-delay: .3s;
transform: translateX(0); /* これで定位置に出現 */
}
label すなわちMENUボタンをクリックすると、#dummyCheckBoxが checked の状態になり、ボタンの後に置かれた #siteNavi が .3秒かかって出現する（定位置に戻る）・・という意味です。
~
~
