*

PC LIFE

ホーム >  Web制作 >  変化を付ける小技 > 
CSSで作るドロップダウンメニュー MENU 

CSSのみで作成した縦型と横型の各2個のドロップダウンメニューの事例紹介です。いずれもリスト形式(ulとli)で表示し、ドロップダウンメニューはCSSの表示、非表示を利用してます。横型を追加、事例3改良

  • 概要
  • 事例1

    縦型

  • メニューの下に下位階層のメニューを表示。縦型なので、サイドメニュー向き。2階層目を表示するとその高さ分、下の記事が下方に動く。このタイプはCSSが厄介。修正
  • 事例2

    縦型

  • マウスを重ねたメニューの横に表示。最後のメニューは、右に記事があるとメニュー領域分が記事の上に重なるので、右にメニュー分の幅(記事があっても良い)が無いと、ページ領域内からはみ出す。
  • 事例3

    横型

  • 3階層まで表示可能。2階層メニューのマウスホバー時に3階層目を同じ高さ位置で表示。右端のメニューは、画面からはみ出すので第3階層を左に表示。修正
  • 事例4

    横型

  • 2階層以下を縦1列に3階層まで表示できる横型メニュー。メニュー幅を%指定なので、レスポンシブウェッブに最適です。お薦めのモデル


事例4     説明位置へ

注意点:事例2と3は、横に表示しているため画面が小さくなると表示出来なくなる問題があり、スマホ、タブレットに対応できない状態になります、その対応について、

1.メディアクエリー(以下、MQと略)で横に表示するメニューを非表示にする。親メニューには、必ずリンクが必要。
  当サイトでは、この仕様となっている。

2.MQで横表示を縦表示に変える。縦にした時、メニュー数が多い場合とても使いずらい。

3.ヘッダー部の中に縦型のメニューにして組み込む。追記

共通のCSS

事例1・縦型 下に表示 修正

事例1・HTML

事例1・CSS

事例1・ご利用にあたっての考慮点

  • 行番
  • 説明
  • 2
  • メニューの幅
  • 4
  • メニューの高さ。heightの指定ではデザインが崩れる。
  • 17-18
  • 左罫線の重複を解除。
  • 31-32
  • 左罫線。17-18行目で罫線の重複を無くしているので、最後に罫線を復活。

事例2・縦型 真横に表示 修正

事例2・HTML

事例2・CSS

事例2では、子メニューの修飾は省略しています。子メニューを横に表示するタイプは、レスポンシブ・サイトの場合、デザイン上ちょっと工夫が必要です。CSSで子メニューの左位置(13行目)を小さくして、メニューに重ねる方法があります。

事例3・横型3階層 修正

事例3・HTML

事例3・CSS

事例3・ご利用にあたっての考慮点

  • 行番
  • 説明
  • 3
  • メニュー全体の横幅。(10行目の1メニュー幅)×(メニュー数)+ (メニュー数)+1。
  • 8
  • display:inline-block;で出来る隙間を無くす記述。尚、事例4では、display:inline-block;を使い隙間をCSSで調整
  • 10
  • 1つのメニューの幅。
  • 11
  • メニューの高さ。emの指定も可。
  • 33
  • 10行目と同じ幅。第2と第3階層の間に隙間を取らないでこと。
  • 39-41
  • 第2階層ホバー時、第3階層をその横から表示。
  • 44-45
  • 右端の第3メニューを右側に表示。

注意事項:第2階層と第3階層の間に隙間を作ると、第3階層にマウスを横に移動すると、第3階層のメニューが消えてしまいます。空間をマウスが通過するとき、マウスホバー 状態が解除されるためです。


事例4・横型3階層 2階層以下縦表示 修正

事例4・HTML

事例4・CSS

事例4・ご利用にあたっての考慮点

  • 行番
  • 説明
  • 4
  • メニュー表示領域内でのメニュー全体の幅のパーセント指定
  • 10
  • メニュー1つの幅を%指定。横メニューの数で変更が必須。(100/メニュー数)で合計が96前後の値
  • 32-33
  • メニューの横の仕切り線。横メニューの数で変更が必須。メニュー数が5個の場合、2つ目のnth-childは、(-n+4)。最初のnth-child(n+1)はそのまま。