sincoolka/Project-new-web
7
0
Fork 0
Code Issues Releases Activity

Hover animation of navigation items

Browse Source
This commit is contained in:
Marcel Petráň 2019-04-26 22:29:32 +02:00
parent 537c81e244
commit 5a7b057c0b
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cs/home.html
View File

@ -10,7 +10,7 @@
<title>Sincoolka</title> <title>Sincoolka</title>
</head> </head>
<body> <body>
<nav id="overlay"> <nav id="overlay" class="overlay">
<div class="navbar-strip"> <div class="navbar-strip">
<div class="navbar-container"> <div class="navbar-container">
<div class="navbar-grid"> <div class="navbar-grid">
@ -45,7 +45,7 @@
<li> <li>
<a href="#">EN</a> <a href="#">EN</a>
</li> </li>
</div> </div>
</ul> </ul>
</nav> </nav>

29
css/master.css
View File

@ -281,20 +281,39 @@ nav ul {
justify-content: space-evenly; justify-content: space-evenly;
text-align: center; text-align: center;
} }
nav ul a{ nav.overlay ul li a {
position: relative;
color:#4A4A4A; color:#4A4A4A;
font-weight: bold; font-weight: bold;
font-size: 2.3em; font-size: 2.3em;
} }
nav.overlay ul li a::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.overlay ul li a:hover::after{
width: 100%;
}
nav ul li a:after {
transition: all .5s;
}
nav ul li a:hover{
color:#0E404D;
text-decoration: none;
}
nav ul li { nav ul li {
opacity: 0; opacity: 0;
animation: show-x .7s 1s forwards; animation: show-x .7s 1s forwards;
-webkit-animation: show-x .7s 1s forwards; -webkit-animation: show-x .7s 1s forwards;
} }
nav ul a:hover{
color:#0E404D;
text-decoration: none;
}
#overlay h1.nav{ #overlay h1.nav{
opacity: 0; opacity: 0;
} }