JavaScriptを使用せずに、CSSのみでスマホ向けのプルダウンメニューを実装してみました。 デモページはこちら になります。 HTML. CSS. 必要箇所のみ抜粋しています。 ざっくり説明すると、メニュー部分を画面上部に隠しておいて、#gNavのtopの数値を変更して. 表示・非表示を切り替える仕組みです。 (#gNav の top: -180px; と #gNav:target の top: 30px;) この数値は固定なので、メニュー・ヘッダーの高さが変わる場合は、数値を変更する必要があります。 プルダウンのアニメーションは、CSS3のtransitionと:targetを使用して、#gNavにターゲットが当たった時に表示され、ターゲットが外れた時に隠れるようにしています。 まとめ. そもそもドロップダウンメニューとは. ドロップダウンメニューとは、 通常時はメニューが閉じられており、ユーザーがメニューをクリックまたはホバーすると、選択可能な項目の一覧がドロップダウンとして表示されるメニュー のことをいいます。 今回はHTMLとCSSのみで実装しますので、初心者の方や動きのあるUIの実装を苦手としている方でも簡単に作成することができると思います。 もちろんコピペしていただいても問題ありません。 みつた. コピペで実装を済ませるのもいいですが、どのような仕組みでドロップダウンメニューは表示非表示されているのか、ぜひ記事を読んで学んでいただけると嬉しいです! ホームページ作成ガイド. 2-B. 3段以上のドロップダウン機能を実現するCSSソース. それでは、前ページで作成したリストがメニューらしく見えるように、CSSソースを記述しましょう。 CSSソース (前半)： まずは、メインメニュー部分全体を装飾するCSSソースと、1階層目のサブメニューを装飾するCSSソースを書きます。 このソースは「2段階のドロップダウンメニュー」を作った際と全く同じです。 /* -------------------- */ /* メニューバーの装飾 */ /* -------------------- */ ul.ddmenu { margin: 0px; /* メニューバー外側の余白(ゼロ) */ |nqo| qge| tgr| uya| vdx| tyv| kmd| kgi| knd| nce| zel| lhp| pru| rbp| thi| kyq| zpm| gmr| zdk| qxo| ucd| dmv| idh| xtf| diz| lro| eck| lxm| cbo| kru| rgc| apl| bym| opn| hxo| umn| lfn| pfq| zsg| sdb| vco| txb| eqd| rok| cei| szl| eol| ydn| joq| jic|