デザイン

デザイン

【わかりやすい!】素朴なCSSドロップダウンメニューの作り方

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、How To Create a Pure CSS Dropdown Menu
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,147 views

読了時間 : 約2分24秒

高機能なセレクターをお持ちであれば、ドロップダウンメニューは簡単作ることができます。好きなCSS3プロパティを入れてみると、背景画像やJavaScriptでしか得るこのできなかったデザインを作り出せます。下記のチュートリアル通りにCSSドロップダウンメニューを作ってみてください。

 

メニューを開くと、2つのサブカテゴリも開きます。最初のサブリンクはメインナビゲーションバーに下に現れ、2番目は最初のドロップダウンから垂直に伸びています。CSSドロップダウンメニューのデモ動画を見てみて早速行動に移りましょう。

 

HTML構造

 

まず第1に、CSSメニューのためにHTMLを作成する必要があります。HTML5を使い、ナビゲーションメニューを〈nav〉要素に組織します、そしてはじめのナビゲーションリンクをシンプルなリストに加えます。

 

 

はじめのサブメニューをTutorialsの下とArticlesのリンクの下に入れ、〈Li〉と打ち込むことでメニューが完成します。

 

 

2番目のサブメニューをはじめのサブメニューのWeb Designセクションの下におきます。このリンクはまたリストに配置され、Web Designのセクションに挿入されます。

ここまでやってみるときちんとしたリンクを持つサブメニューを作り出すことができます。

 

CSSのスタイル

 

 

ドロップダウン機能を働かせるためにCSSを使いましょう。CSSの特異性と高機能なセレクターによって無駄なidやクラスなしに特定のHTMLを探し当てることができます。まずサブメニューを隠すためにULdisplay:noun;を使います。再度表示させるには、LIの要素をまたブロックする必要があります。〉のセレクターによって、サブメニューを全て表示させることなく、子機のULだけがターゲットされるようにしましょう。

 

 

そしてメインのナビゲーションメニューに取り掛かることができます。傾斜やボックスシャドウ、ボーダー記号などのCSS3プロパティを使います。position:relative;を加えることによって、メインメニューバーにサブメニューバーを設置することができ、display:inlin-tableによってちょうどいいサイズのメニューに縮めてくれます。クリアフィックスがoverflow:hiddenを使う必要なく、サブメニューが表示されなくなるのを阻止してくれます。

 

 

個別のメニューは〈Li〉を加えたCSSによってデザインされます。ブラウザの中にリンクを作り上げ、青色の背景と白色のテキストに変えます。

 

 

メインメニューバーは出来上がりましたが、サブメニューには少し修正が必要です。メニューバーと少しスタイルが似ているので背景とボーダーをなくし、別のものを配置することでもっといいデザインとなります。ちゃんとメニューバーの下に表示させるにはULの一番上に配置されなければなりません。

 

ULのそれぞれのLIは隣に浮いている必要はありません。代わりに垂直に配置され、細い線で互いから分かれているのがベストです。素早い移動エフェクトによって背景を暗くすることによってさらに良くなります。

 

 

最後のステップはサブメニューのさらにサブメニューを配置することです。サブメニューの特徴を受け継ぎ、ちゃんと〈Li〉右側に配置されればいいだけとなります。

 

完成した素朴なCSSドロップダウンメニュー

おすすめ新着記事

おすすめタグ