LogoMark.png

CSS/SlideMenu

CSS Slide Menu

CSSでメニューをトグル表示する例

一般にメニューの開閉には jQueryのトグル機能 を使いますが、ここでは CSSアニメーションのみでメニューをトグル表示するサンプルを紹介します。ソースはかなりトリッキーなものになるのですが、まずは、DEMOをご覧下さい。以下、解説記事を順にご確認下さい。

使用する属性とセレクタ

このサンプルで使用する属性・セレクタについて概説します。

for 属性

for属性はフォームパーツと要素を関連付けるために用いられる属性で、label 要素に用いられます。

labelタグの書き方は2種類あって、1つは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の記述順に影響されるので要注意。以下、事例です。

こう書くと「芸術学部」と「デザイン学科」が赤く表示されます。
を使うと例えば、チェックボックスをきっかけとして、チェックボックスとは離れた場所にある要素にスタイルを定義する・・ということができます。

擬似クラス :checked

CSSでボタンのような機能を実現するためには、 :checked 擬似クラスの機能を使う必要があります。DEMO では、チェックの有無ごとにスタイルを設定し、これによって、メニューの開閉を行っています。以下の例では、チェクされた方の label の文字(選択肢1または選択肢2)が 赤字になります。

補足:[+ label ] という記述は、それに隣接する label 要素を意味します。




DEMOのソースコード

以下、DEMO の当該部分のソースコードです。




PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-01-20 (月) 11:43:01