A Pen by Dominik Biedebach on CodePen.
Created
January 12, 2018 21:43
-
-
Save sarahbohr/2d80b6d90d468e7d2953d826dc54f3e6 to your computer and use it in GitHub Desktop.
Navigation Effects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- By Dominik Biedebach @domobch --> | |
<link href='https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'> | |
<section style="background: #3498db; color: #fff;"> | |
<h1>Beautiful navigation hover effects</h1> | |
<p class="center">Scroll down to see some effects in action</p> | |
<p class="center"><small>please use a latest webkit browser like Chrome or Opera. Thank you.</small></p> | |
</section> | |
<section style="background: #e74c3c; color: #fff;"> | |
<h2>Underline Stroke</h2> | |
<nav class="stroke"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Downloads</a></li> | |
<li><a href="#">More</a></li> | |
<li><a href="#">Nice staff</a></li> | |
</ul> | |
</nav> | |
</section> | |
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);"> | |
<h2>Underline Fill</h2> | |
<nav class="fill"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Downloads</a></li> | |
<li><a href="#">More</a></li> | |
<li><a href="#">Nice staff</a></li> | |
</ul> | |
</nav> | |
</section> | |
<section style="background: #34495e; color: rgba(255, 255, 255, 0.5);"> | |
<h2>Circle Fill</h2> | |
<nav class="circle"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Downloads</a></li> | |
<li><a href="#">More</a></li> | |
<li><a href="#">Nice staff</a></li> | |
</ul> | |
</nav> | |
</section> | |
<section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);"> | |
<h2>Shift</h2> | |
<nav class="shift"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Downloads</a></li> | |
<li><a href="#">More</a></li> | |
<li><a href="#">Nice staff</a></li> | |
</ul> | |
</nav> | |
</section> | |
<section style="background: #d35400; color: #fff;"> | |
<h2>Blend</h2> | |
<nav class="blend"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Downloads</a></li> | |
<li><a href="#">More</a></li> | |
<li><a href="#">Nice staff</a></li> | |
</ul> | |
</nav> | |
</section> | |
<section style="background: #89C52B; color: #fff;"> | |
<h2>Drown</h2> | |
<nav class="drown"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Downloads</a></li> | |
<li><a href="#">More</a></li> | |
<li><a href="#">Nice staff</a></li> | |
</ul> | |
</nav> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* By Dominik Biedebach @domobch */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* By Dominik Biedebach @domobch */ | |
body { | |
font-family: 'Roboto', sans-serif; | |
padding: 0; | |
margin: 0; | |
} | |
small { | |
font-size: 12px; | |
color: rgba(0, 0, 0, 0.4); | |
} | |
h1 { | |
text-align: center; | |
padding: 50px 0; | |
font-weight: 800; | |
margin: 0; | |
letter-spacing: -1px; | |
color: inherit; | |
font-size: 40px; | |
} | |
/* By Dominik Biedebach @domobch */ | |
h2 { | |
text-align: center; | |
font-size: 30px; | |
margin: 0; | |
font-weight: 300; | |
color: inherit; | |
padding: 50px; | |
} | |
.center { | |
text-align: center; | |
} | |
/* By Dominik Biedebach @domobch */ | |
section { | |
height: 100vh; | |
} | |
/* NAVIGATION */ | |
nav { | |
width: 80%; | |
margin: 0 auto; | |
background: #fff; | |
padding: 50px 0; | |
box-shadow: 0px 5px 0px #dedede; | |
} | |
/* By Dominik Biedebach @domobch */ | |
nav ul { | |
list-style: none; | |
text-align: center; | |
} | |
nav ul li { | |
display: inline-block; | |
} | |
nav ul li a { | |
display: block; | |
padding: 15px; | |
text-decoration: none; | |
color: #aaa; | |
font-weight: 800; | |
text-transform: uppercase; | |
margin: 0 10px; | |
} | |
nav ul li a, | |
nav ul li a:after, | |
nav ul li a:before { | |
transition: all .5s; | |
} | |
nav ul li a:hover { | |
color: #555; | |
} | |
/* By Dominik Biedebach @domobch */ | |
/* stroke */ | |
nav.stroke ul li a, | |
nav.fill ul li a { | |
position: relative; | |
} | |
nav.stroke ul li a:after, | |
nav.fill ul li a:after { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
width: 0%; | |
content: '.'; | |
color: transparent; | |
background: #333; | |
height: 1px; | |
} | |
nav.stroke ul li a:hover:after { | |
width: 100%; | |
} | |
nav.fill ul li a { | |
transition: all 2s; | |
} | |
/* By Dominik Biedebach @domobch */ | |
nav.fill ul li a:after { | |
text-align: left; | |
content: '.'; | |
margin: 0; | |
opacity: 0; | |
} | |
nav.fill ul li a:hover { | |
color: #023f1c; | |
z-index: 1; | |
} | |
nav.fill ul li a:hover:after { | |
z-index: -10; | |
animation: fill 1s forwards; | |
-webkit-animation: fill 1s forwards; | |
-moz-animation: fill 1s forwards; | |
opacity: 1; | |
} | |
/* Circle */ | |
nav.circle ul li a { | |
position: relative; | |
overflow: hidden; | |
z-index: 1; | |
} | |
/* By Dominik Biedebach @domobch */ | |
nav.circle ul li a:after { | |
display: block; | |
position: absolute; | |
margin: 0; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
content: '.'; | |
color: transparent; | |
width: 1px; | |
height: 1px; | |
border-radius: 50%; | |
background: transparent; | |
} | |
nav.circle ul li a:hover:after { | |
-webkit-animation: circle 1.5s ease-in forwards; | |
} | |
/* SHIFT */ | |
nav.shift ul li a { | |
position:relative; | |
z-index: 1; | |
} | |
nav.shift ul li a:hover { | |
color: #91640F; | |
} | |
nav.shift ul li a:after { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
margin: auto; | |
width: 100%; | |
height: 1px; | |
content: '.'; | |
color: transparent; | |
background: #F1C40F; | |
visibility: none; | |
opacity: 0; | |
z-index: -1; | |
} | |
nav.shift ul li a:hover:after { | |
opacity: 1; | |
visibility: visible; | |
height: 100%; | |
} | |
/* By Dominik Biedebach @domobch */ | |
/* Blend */ | |
nav.blend ul li a { | |
position: relative; | |
border-radius: 5px; | |
overflow: hidden; | |
z-index: 1; | |
} | |
nav.blend ul li a:hover { | |
color: #fff; | |
} | |
nav.blend ul li a:before, | |
nav.blend ul li a:after { | |
position: absolute; | |
width: 0px; | |
height: 100%; | |
top: 0; | |
bottom: 0; | |
background: #D35400; | |
transition: all .5s; | |
margin: auto; | |
content: '.'; | |
color: transparent; | |
z-index: -1; | |
opacity: 0.75; | |
} | |
nav.blend ul li a:before { | |
left: 0; | |
} | |
nav.blend ul li a:after { | |
right: 0; | |
} | |
nav.blend ul li a:hover:after, | |
nav.blend ul li a:hover:before { | |
width: 100%; | |
} | |
/* DROWN */ | |
nav.drown ul li a { | |
position: relative; | |
overflow: hidden; | |
z-index: 1; | |
} | |
nav.drown ul li a:hover { | |
color: #fff; | |
} | |
nav.drown ul li a:before { | |
background: #fff; | |
content: '.'; | |
color: transparent; | |
position: absolute; | |
width: 500%; | |
top: 100px; | |
right: 300px; | |
height: 300px; | |
z-index: -1; | |
} | |
nav.drown ul li a:hover:before { | |
left: auto; | |
bottom: auto; | |
right: -50%; | |
top: 0; | |
background: #89C52B; | |
} | |
/* Keyframes */ | |
@-webkit-keyframes fill { | |
0% { | |
width: 0%; | |
height: 1px; | |
} | |
50% { | |
width: 100%; | |
height: 1px; | |
} | |
100% { | |
width: 100%; | |
height: 100%; | |
background: #2ECC71; | |
} | |
} | |
/* Keyframes */ | |
@-webkit-keyframes circle { | |
0% { | |
width: 1px; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
margin: auto; | |
height: 1px; | |
z-index: -1; | |
background: #eee; | |
border-radius: 100%; | |
} | |
100% { | |
background: #aaa; | |
height: 5000%; | |
width: 5000%; | |
z-index: -1; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
border-radius: 0; | |
} | |
} | |
/* By Dominik Biedebach @domobch */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment