Skip to content

Instantly share code, notes, and snippets.

@Nandakyawwin

Nandakyawwin/index.html

Created April 1, 2020 05:30
Show Gist options
  • Save Nandakyawwin/cbb1b5a6e000ec538d57bc5e6e49a07a to your computer and use it in GitHub Desktop.
Save Nandakyawwin/cbb1b5a6e000ec538d57bc5e6e49a07a to your computer and use it in GitHub Desktop.
Download ZIP
Navbar Effect
Raw
index.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<div class="container-fluid ml-auto bg-dark">
<nav class="container navbar navbar-expand-lg navbar-light navbarC">
<a class="navbar-brand text-light" href="#">Extra</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link home text-light" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link features text-light" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link price text-light" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<h1 class="readme">Please Hover the Nav Items</h1>
<h2 class="readme">Just like Home,About</h2>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Raw
script.js
var nav = document.querySelector(".home");
var n = nav.length;
Raw
style.css
li{
list-style: none;
display: inline-block;
text-align: center;
}
.home{
text-decoration: none;
position: relative;
color: silver;
font-family: serif;
display: block;
overflow: hidden;
transition: 0.7s all;
}
.home:before{
content: '';
width: 0px;
position: absolute;
border-bottom: 5px solid yellow;
bottom: 0;
transition: 0.5s all;
}
.home:hover:before{
width: 40px;
transition: .9s all;
}
.features{
text-decoration: none;
position: relative;
color: silver;
font-family: serif;
display: block;
overflow: hidden;
transition: 0.7s all;
}
.features:before{
content: '';
width: 0px;
position: absolute;
border-bottom: 5px solid yellow;
bottom: 0;
transition: 0.5s all;
}
.features:hover:before{
width: 52px;
transition: .9s all;
}
.price{
text-decoration: none;
position: relative;
color: silver;
font-family: serif;
display: block;
overflow: hidden;
transition: 0.7s all;
}
.price:before{
content: '';
width: 0px;
position: absolute;
border-bottom: 5px solid yellow;
bottom: 0;
transition: 0.5s all;
}
.price:hover:before{
width: 45px;
transition: .9s all;
}
.downloads{
text-decoration: none;
position: relative;
color: silver;
font-family: serif;
display: block;
overflow: hidden;
transition: 0.7s all;
}
.downloads:before{
content: '';
width: 0px;
position: absolute;
border-bottom: 5px solid yellow;
bottom: 0;
transition: 0.5s all;
}
.downloads:hover:before{
width: 72px;
transition: .9s all;
}
.readme{
text-align : center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment