メニューのサンプル 2

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
  <li id="item1"><a href="">ITEM 1</a></li>
  <li id="item2"><a href="">ITEM 2</a></li>
  <li id="item3"><a href="">ITEM 3</a></li>
  <li id="item4"><a href="">ITEM 4</a></li>
  <li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}
#menu::after {
  clear: both;
  content: "";
  display: block;
  line-height: 0;
}
#menu li {
  float: left;
  position: relative;
  z-index: 1;
}
#menu li + li {
  margin-left: 5px;
}
#menu li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 5px;
  line-height: 0;
}
#menu li:hover::before {
  bottom: 100%;
  transition-property: bottom;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu li:hover a {
  transition-property: color;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu a {
  display: block;
  margin: 0;
  padding: 0.75em 1em;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
#item1::before {
  background-color: #dd3333;
}
#item2::before {
  background-color: #dd9933;
}
#item3::before {
  background-color: #81d742;
}
#item4::before {
  background-color: #8224e3;
}
#item5::before {
  background-color: #52C0D4;
}
#item1:hover a {
  color: #dd3333;
}
#item2:hover a {
  color: #dd9933;
}
#item3:hover a {
  color: #81d742;
}
#item4:hover a {
  color: #8224e3;
}
#item5:hover a {
  color: #52C0D4;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です