裏紙に書く程度の内容

html5 + css3 だけでプルダウンのメニュー ブラウザ対応

htmlとcssだけでプルダウンメニューを作る方法、その3。

前回まで、htmlとcssだけでプルダウメニューを作成してきましたが、chromeのみで確認していました。

html5 + cssだけでプルダウンメニュー - アニメーションの追加

今回はほかブラウザでも表示されるよう対処していきます。

IE、Firefoxでの表示確認

まずはIE、firefoxででどう表示されているか確認します。下の画像はIEでの表示キャプチャです。

ie-view1

問題点は以下のとおりです。

  • メインメニュー上部に隙間が開いている
  • menu1の左にマージンがあるように見える
  • サブメニューが左にずれている
  • メインメニューとサブメニューの間に隙間ができている

上の3点はすべて同じ原因で、user agent stylesheetの設定です。

各ブラウザでの隙間を対処

問題点の上3点、各ブラウザのuser agent stylesheetの対策をします。

各ブラウザのulに関するuser agent stylesheet

ulに関する各ブラウザのuser agent stylesheetを見てみましょう。

chrome(webkit)

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

chrome(とsafari)ではmargin-before,margin-after,padding-startで表示位置が設定されています。

Firefox

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  -moz-padding-start: 40px;
}

一方Firefoxではmargin-block-start,margin-block-end,padding-startが設定されているようです。

ie(8,9)

ul {
    display: block;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: disc;
    margin: 1em 0;
    padding: 0 0 0 30pt;
}

そしてieは・・・・margin,paddingのようです。

修正方法

chrome,Firefoxのみを見ると、margin-before/after,margin-block-start/end,padding-startで制御したいところですが、ie用にはmargin,paddingを設定する必要があります。

どうせmargin,padding設定するなら、前者はいらねんじゃね?ってことで、cssは以下のようになります。

ul {
  /* -webkit-padding-start: 0; (削除) */
  /* -webkit-margin-before: 0; (削除) */

  /* 追加 */
  margin: 0;
  padding: 0;
}

ie-view2

うまくいきました。

というか、最初にuser agent stylesheetを意識して-webkit-padding-start: 0;にしてたために発生した問題です。何も考えずにpaddin,margin設定してたら問題なかったっぽいですね。

メニューとサブメニュー間の隙間の修正

続いてメニュー部とサブメニュー部に発生している隙間の対処です。

こいつの原因は、menu3ではホバー時のアニメーション効果を加えるためにtopのプロパティを触っているためです。

css は以下のようになっています。

.main-nav .sub-nav {
  top: 0;
  transform: rotateX(90deg);
  transition-property: top transform;
  transition-duration: 500ms;
  z-index: -1;
}
.main-nav > li.has-sub:hover .sub-nav {
  top: 46px;
  transform: rotateX(0deg);
}

初期状態ではtop: 0;,ホバー時にtop: 46px;にしています。この’46px’とは、chromeで見たときのメインメニュー部の高さを指定していました。

これの高さがie,Firefoxでは異なっていたために隙間ができています。chromeでも設定状態によってはおかしな表示になっていたかもしれません。

で、以下のとおり変更します。

.main-nav > li.has-sub:hover .sub-nav {
  top: 100%;  /* 変更 */
  transform: rotateX(0deg);
}

注意点としてはtop: initial;にするとアニメーションが動かないので上記のようにパーセントで指定します。

ie-view3

修正できました。

実際の動きと全体のCSSは以下で確認できます。

DEMO


今回はここまでです。

ベンダプレフィックスを正しく設定して各ブラウザ対応するつもりだったんですが、ieの対処するともはや関係なくなっちゃいました。

あとはモバイル対応も考えなくちゃいけないので別途記事にします。

参考

各ブラウザの User Agent Stylesheet を見たいとき

広告
Index