ドロップダウンメニューのアイディア

Category : CSS

よくあるドロップダウンメニューのアイディアです。
CSS 3D Transforms に対応しているブラウザにはそれを使った UI を、そうでないブラウザにはシンプルな切り替えを提供します。

CSS のみ補足コメントつきで載せておきます。

.nav a {
  display: block;
  padding: 0 0.5em;
  color: #f6f6f6;
  line-height: 2;
  text-decoration: none;
}

/* ul のスタイルリセット */
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* clearfix */
.nav > ul:after {
  display: block;
  clear: both;
  content: "";
}

/* メニューを横並びに */
.nav > ul > li {
  position: relative;
  float: left;
  width: 20%;
}

/*
  何もない(ように見える)場所でマウスオーバーイベントが発生してしまうので
  visibility: hideen; して反応しないようにする
*/
.children {
  position: absolute;
  width: 100%;
  visibility: hidden;
  perspective: 500px;
}

/* 親にマウス乗ったら表示 */
.nav > ul > li:hover .children {
  visibility: visible;
}

.children a {
  background-color: #1e1e1e;
}

.children a:hover {
  background-color: #454545;
}

/*
  フェードインのように見せたいので opacity: 0;
  Y 軸に対して90度回転させる
  transition は opacity と transform になる
*/
.children li {
  opacity: 0;
  transform: rotateY(90deg);
  transition: 0.25s linear;
}

/*
  Opera (Presto) は 3D Transforms に非対応で
  opacity だけ transition してしまうので transition を消す
  見づらいから
*/
:-o-prefocus,
.children li {
  transition: none;
}

/* 親メニューにマウス乗ったら回転を戻して不透明度も最大に */
.nav > ul > li:hover .children li {
  opacity: 1;
  transform: rotateY(0);
}

/* パラパラ感を出すために少し遅らせて transitions 開始 */
.children li:nth-child(2) {
  transition-delay: 0.05s;
}

/* 以下 0.05s ずつ遅らせる */
.children li:nth-child(3) {
  transition-delay: 0.1s;
}

思いついたので作ってみたんですけど、使い勝手微妙そう……。
似たようなのでもっといいもの既に作ってる人いそうな気がします。

Leave a Reply