Skip to content

Instantly share code, notes, and snippets.

@uryu-myao
Created April 17, 2018 05:18
Show Gist options
  • Save uryu-myao/14b4560b4b2c08e76b2bdbb850e70450 to your computer and use it in GitHub Desktop.
Save uryu-myao/14b4560b4b2c08e76b2bdbb850e70450 to your computer and use it in GitHub Desktop.
Nav hover Rolling
<div class="wrapper">
<li class="nav-item">
<a href="/service/">
<span data-hover="サービス">
MENU
</span>
</a>
</li>
<li class="nav-item">
<a href="/concept/">
<span data-hover="コンセプト">
MENUMENU
</span>
</a></li>
<li class="nav-item">
<a href="/news/">
<span data-hover="ニュース">
MENUMENUMENUMENUMENUMENU
</span>
</a>
</li>
</div>
li.nav-item a {
position: relative;
overflow: hidden;
}
li.nav-item {
text-align: center;
font-size: 3em;
}
li.nav-item a {
width: 100%;
position: relative;
outline: none;
color: DeepSkyBlue;
letter-spacing: 1px;
margin: 0 1vw;
}
li.nav-item {
overflow: hidden;
}
li.nav-item a span {
width: 100%;
display: inline-block !important;
transition: all 0.3s ease;
}
li.nav-item a span::after {
position: absolute;
display: block;
top: 120%;
width: 100%;
content: attr(data-hover);
font-size: 13px;
letter-spacing: .05em;
font-weight: 700;
transform: translate3d(0,0,0);
}
li.nav-item:hover span {
transform: translateY(-100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment