Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

Sharp Menu

Dev

細い文字に細い線、結構好みな感じ。SoundCloud のタブ ( .streamExploreTabs ) を見て真似した ( 見た目だけ ) 。

.menu {
  margin: 2em;
  padding-left: 0;
  height: 1.6em;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  list-style: none;
}

.menu li {
  display: inline-block;
  margin-right: 1em;
  height: 1.6em;
}

.menu-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.menu-link:hover {
  border-bottom: 1px solid black;
}

.menu-link.is-active {
  border-bottom: 1px solid tomato;
}

本当は非アクティブメニューにマウスオーバーしたとき、アニメーションなんかを付けてもう少し工夫したかったんだけど上手いことできなかった。アクティブメニューの下につけてる赤線を左右に移動させたりしてみたかったんだけど難しい。

li:nth-child(1):hover + .bar-line とかやってたら余計な指定が増えたりして訳がわからなくなった。

Remove all ads