メニューのサンプル 3

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

実際の表示

コード

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,
#menu li::after {
content: "";
display: block;
position: absolute;
z-index: -1;
line-height: 0;
}
#menu li::before {
bottom: 0;
width: 100%;
height: 2px;
}
#menu li::after {
top: 0;
left: 0;
width: 2px;
height: 100%;
}
#menu li:hover::before {
bottom: calc(100% - 2px);
transition-property: bottom;
transition-timing-function: linear;
transition-duration: 0.1s;
transition-delay: 0;
}
#menu li:hover::after {
left: calc(100% - 2px);
transition-property: left;
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,
#item1::after {
background-color: #dd3333;
}
#item2::before,
#item2::after {
background-color: #dd9933;
}
#item3::before,
#item3::after {
background-color: #81d742;
}
#item4::before,
#item4::after {
background-color: #8224e3;
}
#item5::before,
#item5::after {
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;
}

コメントを残す

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