Instantly share code, notes, and snippets.
-
Save imliam/0c7ad05cf29d2922c5f9a4a89bcf0434 to your computer and use it in GitHub Desktop.
Bootstrap 4 - Navbar Hover 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
.circleBehind a, .brackets a, .pullDown a, .pullUp a, .pullUpDown a | |
{ | |
text-decoration: none; | |
position: relative; | |
z-index: 0; | |
cursor: pointer; | |
} | |
/* Circle behind */ | |
.circleBehind a:before, .circleBehind a:after | |
{ | |
position: absolute; | |
top: 20px; | |
left: 50%; | |
width: 40px; | |
height: 40px; | |
border: 4px solid lighten($brand-primary, 25%); | |
transform: translateX(-50%) translateY(-50%) scale(0.8); | |
border-radius: 50%; | |
background: transparent; | |
content: ""; | |
opacity: 0; | |
transition: all 0.25s; | |
z-index: -1; | |
} | |
.circleBehind.inverse a:before, .circleBehind.inverse a:after | |
{ | |
border: 4px solid $brand-primary; | |
} | |
.circleBehind a:after | |
{ | |
border-width: 2px; | |
transition: all 0.4s; | |
} | |
.circleBehind.inverse a:after | |
{ | |
border-width: 2px; | |
} | |
.circleBehind a:hover:before | |
{ | |
opacity: 1; | |
transform: translateX(-50%) translateY(-50%) scale(1); | |
} | |
.circleBehind a:hover:after | |
{ | |
opacity: 1; | |
transform: translateX(-50%) translateY(-50%) scale(1.3); | |
} | |
/* Brackets go out */ | |
.brackets a:before, .brackets a:after | |
{ | |
position: absolute; | |
font-size: 1.5em; | |
top: 0; | |
opacity: 0; | |
transition: all 0.25s; | |
} | |
.brackets a:before | |
{ | |
content: '('; | |
left: 0px; | |
transform: translateX(10px); | |
} | |
.brackets a:after | |
{ | |
content: ')'; | |
right: 0px; | |
transform: translateX(-10px); | |
} | |
.brackets a:hover:before, .brackets a:hover:after | |
{ | |
opacity: 1; | |
transform: translateX(0px); | |
} | |
.pullDown.inverse a:before, .pullUp.inverse a:before, .pullUpDown.inverse a:before, | |
.pullDown.inverse a:after, .pullUp.inverse a:after, .pullUpDown.inverse a:after | |
{ | |
background: #fff; | |
} | |
/* Pull down */ | |
.pullDown a:before | |
{ | |
position: absolute; | |
width: 100%; | |
height: 2px; | |
left: 0px; | |
top: -8px; | |
content: ''; | |
background: #999; | |
opacity: 0.3; | |
transition: all 0.25s; | |
} | |
.pullDown a:hover:before | |
{ | |
height: 58px; | |
} | |
/* Pull up */ | |
.pullUp a:before | |
{ | |
position: absolute; | |
width: 100%; | |
height: 2px; | |
left: 0px; | |
bottom: -8px; | |
content: ''; | |
background: #999; | |
opacity: 0.3; | |
transition: all 0.25s; | |
} | |
.pullUp a:hover:before | |
{ | |
height: 58px; | |
} | |
/* Pull up and down */ | |
.pullUpDown a:before, .pullUpDown a:after | |
{ | |
position: absolute; | |
width: 100%; | |
height: 2px; | |
left: 0px; | |
content: ''; | |
background: #999; | |
opacity: 0.3; | |
transition: all 0.25s; | |
} | |
.pullUpDown a:before | |
{ | |
top: -8px; | |
} | |
.pullUpDown a:after | |
{ | |
bottom: -8px; | |
} | |
.pullUpDown a:hover:before, .pullUpDown a:hover:after | |
{ | |
height: 28px; | |
} |
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
<!-- | |
|-------------------------------------------------------------------------- | |
| Bootstrap 4 - Navbar Hover Effects | |
|-------------------------------------------------------------------------- | |
| | |
| Some options for animating navbar links when hovering over them. | |
| Inspired by EvyatarDa (https://codepen.io/EvyatarDa/pen/waKXMd) | |
| | |
--> | |
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav circleBehind inverse"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav circleBehind"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<br /> | |
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav brackets"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav brackets"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<br /> | |
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav pullDown inverse"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav pullDown"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<br /> | |
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav pullUp inverse"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav pullUp"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<br /> | |
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav pullUpDown inverse"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> | |
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<div class="collapse navbar-collapse" id="navbarNav"> | |
<ul class="navbar-nav pullUpDown"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Features</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Pricing</a> | |
</li> | |
</ul> | |
</div> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment