裏紙に書く程度の内容

html5 + css3 だけでプルダウンのメニューを作成する方法

html と css で、javascriptを使わずにプルダウンを持ったナビゲーションメニューを作成します。

もちろんbootstrapfoundation等のCSSフレームワーク使えば簡単にできるんですが、それじゃあお勉強にならないので自前で実装する方法です。

方針

まずは方針。

HTMLの構成について

メニューはulのリストで構成。リンクするのでaタグでメニュー名を記載します。

1階層目はmain-navというクラスで定義し、2階層目はsub-navというクラスのulで続けることにします。

また、2階層目を持たせるli要素にはhas-subというクラスを指定します。


この例では1階層目がmenu1~4で、menu3のみ2階層目を持つ形です。

余談になりますが、<li>の終了タグ</li>は省略しています。html5ではこの書き方でOK!

これをブラウザで表示すると以下のようになります。

nav1_onlyhtml

ここからcssによりメニューっぽくしていきます。

スタイル、挙動について

1階層目(menu1~4)は横並びに配置し、マウスホバー時に2階層目(sub1-3)を表示するようにします。

2階層目メニューは縦に表示することにします。

初期段階のレイアウト

まず、プルダウンの動作は置いといて、レイアウトを設定します。

リストを横並びにする

リストを横並びにするにはdisplay: inline-block;を指定します。floatを使う方法もあるんですがややこしくて自分はあまり好きじゃありません。

.main-nav {
  background-color: #ccc;
  list-style: none;
}
.main-nav li {
  display: inline-block;
  width: 200px;
  text-align: center;
}

また、リストの左に表示される点は不要なので非表示にしています。

これだけだとリスト要素が左に詰まって見にくくなってしまうので、liwidth: 200px;として全てのリスト要素の幅を固定にし、さらに文字は真ん中寄せになるようにしました。

ブラウザ上では以下のように表示されます。

※chromeでの表示確認です。

nav2

この時点でおかしなことに気づくと思います。

2階層目のメニューがなにやらインデントされています。また、よく見ると1階層目のメニューの左側もマージンが設定されているように見えます。

これはブラウザデフォルトスタイルである、user agent stylesheetが利いているのが原因です。

user agent stylesheet の無効化

user agent stylesheetの説明は省略します。以下などを参考に。

user agent stylesheetとは何か

chromeの場合はul-webkit-padding-start: 40px;が設定されているので無効化します。

.main-nav {
  background-color: #ccc;
  list-style: none;
  padding-left: 0;
  -webkit-padding-start: 0;        /* (1) */
}
.main-nav li {
  display: inline-block;
  width: 200px;
  text-align: center;
}

/* (2) */
.main-nav .sub-nav {
  -webkit-padding-start: 0;
}

(1)を追加し、さらに2階層目用に(2)のブロックを追加ました。

見た目は以下のように変わります。

nav3

配置がそろいました。ベンダプレフィックスについて考慮する必要があるのですが、後回しにします。

入れ子部分の配置を整理する

ここまででブラウザ上での表示はmenu3が子要素(2階層目のメニュー)を持っているため高さが大きくなってしまっています。

これはpositionを使用することにより解決可能です。

/* (1) */
.main-nav li.has-sub {
  position: relative;
}

.main-nav .sub-nav {
  -webkit-padding-start: 0;
  position: absolute;       /* (2) */
  background-color: #ddd;   /* (3) */
}

positionの使い方は割愛します。(1),(2)をそれぞれ追記しました。さらに見やすくするため、2階層目のリストに(3)で背景色を追加しています。

nav4

だんだん理想に近づいてきましたね。メニューが開いた状態になっています。

基本的なレイアウトはひとまずこれで完成です。

マウスホバー時のみサブメニューが表示されるようにする

ここまでで基本的なレイアウトはできたのものの、2階層目のメニューが開きっぱなしです。

これを普段は2階層目は閉じておき、マウスホバー時のみ表示されるようにします。

.main-nav .sub-nav {
  -webkit-padding-start: 0;
  position: absolute;
  background-color: #ddd;
  display: none;           /* (1) */
}

/* (2) */
.main-nav li.has-sub:hover .sub-nav {
  display: block;
}

まず、(1).sub-navは基本的に非表示にします。

このままでは2階層目が消えるだけなので(2)を追加し、has-subクラスを持った要素のホバー時は2階層目であるsub-navクラスを表示するようにします。

nav5

画像ではhoverが動かないのでわかりにくいですが、実際にはmenu3にカーソルを持っていくと2階層目のメニューが表示されることが確認できると思います。

とりあえずここまでで、見た目はアレだけどhtmlとcssだけでプルダウンするメニューができました。

次回、見た目を整理して使えるものにしていきます。

アニメーションの追加へ

ソースコード

今回のソースコード全体は下記を。



  
    
    pull down menu example
  
  
    
  

.main-nav {
  background-color: #ccc;
  list-style: none;
  -webkit-padding-start: 0;
}
.main-nav li {
  display: inline-block;
  width: 200px;
  text-align: center;
}
.main-nav li.has-sub {
  position: relative;
}
.main-nav li.has-sub:hover .sub-nav {
  display: block;
}
.main-nav .sub-nav {
  -webkit-padding-start: 0;
  position: absolute;
  background-color: #ddd;
  display: none;
}
URABLO
広告
Index
広告