メニューのサンプル 1

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

実際の表示

コード

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 {
height: 100%;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover a {
color: #fff;
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;
}

コメントを残す

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