今まではフッターに項目を並べていたメニュー。PCもスマフォもこの表示だったわけです。それが…
こう。
必要な時にサッと出てくるステキメニューに大変身！右上のメニューボタン（iマーク）をタップすると横からうにょーんとでてきます。
サンプル
jsdo.itにベースにしたサンプルコードを置いといたので、ご自由にお使いください。
仕組みと解説
CSS3を使っての表示の切り替え方はCSS3の擬似クラス[:checked]を使っています。[:checked]で指定されたプロパティは、文字の通りラジオボタンやチェックボックスがチェックされている時だけに適用されます。
ラジオボタンがチェックされると間接セレクタで別の要素のスタイルを操作するわけです。
通常はメニューの横幅は0%。ラジオボックスがチェックされたら横幅が80%に。アニメーションはCSS3のアレで。
|
1 2 3 4 5 6 |
#menu { width: 0%; } #open:checked ~ #menu { width: 80%; } |
開く[i]、閉じる[-]の表示が切り替わったように表現するための小技。事前に２つの要素をぴったり重ねておきます。チェックされたら手前のラベルを非表示に。
|
1 2 3 4 5 6 7 8 |
/* オープンボタンを非表示 */ #open:checked ~ #button_open { display: none; } /* クローズボタンを表示 */ #open:checked ~ #button_close { display: inline; } |
メリット・デメリットとか
最近はメニューのスライドに合わせてメインの部分も横にスライドするような表現が流行っていますが、CSS3でそれをやるにはもう少し工夫がいりそう。それでも今回のコードで十分使える表現のメニューができました。しかしインラインフレームでスクロールバーを処理するのが苦手な端末もあるので、スクロールバーが表示されるような数の多いメニューには向かないかもしれません。
初めまして、ユースケと申します。
メニュー作成をしようとマウスオーバーによる横スライドについて調べてたどり着きました。
いくつかサイトを見たのですがこちらのサイトが私のイメージに近く、ご質問したいことがあります。
当記事ではラジオボタンで判定してスライドされる仕組みになっていますが、ラジオボタンではなくマウスオーバー（hover）時にスライドされるようにしたいと考えております。
自力でカスタマイズして横スライドにすることと、メニューサイズを縦100％にしようとしましたがいずれもできませんでした。
（横のサイズ設定はon,off時共に設定はできました。）
初心者な質問で大変恐縮ですが、宜しければご教示頂けませんでしょうかm(_ _)m
ユースケ様
はじめまして。
記事をご覧くださいましてありがとうございます。
# height 100%ができない
ソースコードなどの詳しい状況がわからないため、動作しなかった原因がわかりませんが、親要素にheightが指定されていないのでは？と予想しました。
heightの100%指定は、その親要素にheightが指定されていなければ動作しません。
またその場合の100%の動作もクセがあります。
下の記事が参考になると思います。
・分かりにくいCSS height のパーセント設定のまとめ
http://etc9.hatenablog.com/entry/20111027/1319730407
# マウスオーバーでスライドさせる
マウスオーバーでスライドさせる場合は、:checkedの擬似要素ではなく、aタグ等の:hoverを使います。
:hover の意味する通りその要素に乗っていることが条件のため、
この記事のソースコードでは、ラジオボタンにマウスオーバーすることでスライドさせることができても、
スライドのメニュー部分にマウスを乗せた途端、ラジオボタンのhoverではなくなり、メニューが閉じてしまいます。
それを防ぐために、メニューのもっとも上の要素であるdiv#slidemenuで:hoverを検知させる必要があります。
サンプルにコードを書いてみましたので、参考にしてください。
http://jsdo.it/sato4yoshida/lO3g
※サンプルのようにメニューがスライドした際にオープンボタンにリンクが重なる形にしてしまうと、
スマホなどの環境によってはスライドすると同時にリンクのタップが発生し、ページを移動してしまう可能性があります。
誤動作を減らせられるようにデザインの変更が必要です。
ご返事ありがとうございます。
無事に自身が思っているレイアウト、動作をすることができました。
しかもサンプルと丁寧なコメントを頂き感謝しております。
今後ともよろしくお願いします。応援しております！
解決したようでよかったです。
応援のコメントありがとうございます。励みになります！ヽ(=´▽`=)ﾉ