『CSSだけでメニューが開いたり閉じたりするアコーディオンを作る!javascript不要』という記事があったので、真似して HTML edit E で試してみた。
まずチェックボタンを作る。id は chk1 にしておく。 <input type="checkbox" id="chk1"> 実行して確認。次にチェックボタンの下に ul 要素を作る。Emmet のおかげで、ul>li{item $}*3 を展開すればできる。 <input type="checkbox" id="chk1"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> この ul 要素をチェックボタンの状態で表示したり、隠したりしたいので、次のような CSS を作成する。セレクタに + を使ってチェックボックスの隣の要素を表すのがミソだ。 <input type="checkbox" id="chk1"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <style> input[type="checkbox"]:checked+ul { height: 0; overflow: hidden; } </style> 実行して、チェックボックスをクリックすると ul 要素が隠れるのがわかる。なぜ、display: none; を使わなかったかは実験するとわかる。次に label 要素を作ってチェックボタンに関連づける。チェックボタンより前に label 要素を作成しないと、ul 要素を隠すことはできない。 <label for="chk1">label 1</label> <input type="checkbox" id="chk1"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <style> input[type="checkbox"]:checked+ul { height: 0; overflow: hidden; } </style> 確認して実行すると、label 要素をクリックすると ul 要素が隠れるのがわかる。最後に、チェックボタンを見えなくして、ul 要素のマージンを0にして形を整える。また、ul 要素も一つ増やす。 <label for="chk1">label 1</label> <input type="checkbox" id="chk1"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <label for="chk2">label 2</label> <input type="checkbox" id="chk2"> <ul> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> <style> input[type="checkbox"]:checked+ul { height: 0; overflow: hidden; } ul { margin: 0; } input[type="checkbox"] { display: none; } </style> メニュー全体を nav 要素の中に入れて、スタイルシートのセレクタにも nav を親要素につければ、セレクタの名前空間にも影響は出ない。上の説明では、わかりやすいように ul のリスト要素はただのテキストにしたが、リンクを張ってもいい。その時は、Emmet で ul>li*3>a を展開すれば骨格ができる。 <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> デザイン性を問うなら、jQuery を利用するところだろうが、簡単なホームページなら、こちらの方が動作の中身がわかっているだけ安心できる。
by tnomura9
| 2016-01-11 21:25
| JavaScript
|
Comments(0)
|
カテゴリ
新型コロナウイルス 主インデックス Haskell 記事リスト 圏論記事リスト 考えるということのリスト 考えるということ ラッセルのパラドックス Haskell Prelude Ocaml ボーカロイド 圏論 jQuery デモ HTML Python ツールボックス XAMPP Ruby ubuntu WordPress 脳の話 話のネタ リンク 幸福論 キリスト教 心の話 メモ 電子カルテ Dojo JavaScript C# NetWalker ed と sed HTML Raspberry Pi C 言語 命題論理 以前の記事
最新のトラックバック
最新のコメント
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||