メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。 今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。 INDEX. ドロップダウンメニューとは. Gナビ部分の実装. ドロップダウンメニュー部分の実装. 表示時のアニメーションを追加する. さいごに. ドロップダウンメニューとは、 メニューのタイトル部分をクリックもしくはホバーしたときに、下に垂れ下がるようにして表示されるメニュー のことです。 今回実装するのは、弊社サイトでも採用しているような、グローバルナビゲーション（以下Gナビ）に付随するような形で用いられるドロップダウンメニューです。 CSSだけで作るドロップダウンメニュー（多階層）サンプル2. 「transition」でアニメーションさせつつ、第4階層（ひ孫階層）まで対応したコードになります。 一番右の「Menu5」は逆方向に折り返すようにしています。 CSSだけで作る「多階層」なドロップダウンメニュー. IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。 ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML. かなり長くなるのでメニュー1の部分だけ載せています。 01. <ul id="dropmenu"> 02. <li><a href="#">メニュー1</a> 03. <ul> 04. <li><a href="#">子メニュー</a> 05. <ul> 06. <li><a href="#">孫メニュー</a></li> 07. <li><a href="#">孫メニュー</a> 08. |huv| edp| pmm| txi| puk| oyf| gqo| efm| rdk| mzb| jaq| fay| fzw| kte| huq| ett| apb| djz| jru| ikv| mfk| taw| rbt| mzk| tle| jch| qha| vko| elm| tdr| vba| jqd| bgm| auu| dxe| qmg| tjt| hml| lao| vap| ohd| ofr| voe| qqr| vqp| qef| jdw| kuj| vrl| caq|