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

2
cs/home.html
View File

@ -10,7 +10,7 @@
<title>Sincoolka</title>
</head>
<body>
<nav id="overlay">
<nav id="overlay" class="overlay">
<div class="navbar-strip">
<div class="navbar-container">
<div class="navbar-grid">

29
css/master.css
View File

@ -281,20 +281,39 @@ nav ul {
justify-content: space-evenly;
text-align: center;
}
nav ul a{
nav.overlay ul li a {
position: relative;
color:#4A4A4A;
font-weight: bold;
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 {
opacity: 0;
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{
opacity: 0;
}