Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/nav style with animation.html

Last active July 13, 2017 05:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevShahidul/428a72c91b75b2a49a1efd0d415815e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevShahidul/428a72c91b75b2a49a1efd0d415815e2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
nav style with animation.html
<div class="main-nav-wrap" id="main-nav-wrap">
<nav class="main-nav">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="#">Introduction</a></li>
<li><a href="#">Private Services</a></li>
<li><a href="single-and-fleet.html">Fleet</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<header class="header-area">
<div class="logo-area">
<div class="booking-btn-area">
<a href="#"><img src="images/book-tn.png" alt="" style=""><span>MAKE A BOOKING</span></a>
</div>
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="mobile-nav" id="mobile-nav">
<div class="menu-text">
<span>Menu</span>
<span>CLOSE MENU</span>
</div>
<div class="nav-icon">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</header>
<style>
.booking-btn-area a span{font-size: 12px; opacity: 0; -webkit-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in;}
.booking-btn-area a:hover span{opacity: 1; -webkit-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in;}
@-webkit-keyframes spaceboots { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }
@-webkit-keyframes spaceboots { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }
@-o-keyframes spaceboots { 0% { -o-transform: translate(2px, 1px) rotate(0deg); } 10% { -o-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -o-transform: translate(-3px, 0px) rotate(1deg); } 30% { -o-transform: translate(0px, 2px) rotate(0deg); } 40% { -o-transform: translate(1px, -1px) rotate(1deg); } 50% { -o-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -o-transform: translate(-3px, 1px) rotate(0deg); } 70% { -o-transform: translate(2px, 1px) rotate(-1deg); } 80% { -o-transform: translate(-1px, -1px) rotate(1deg); } 90% { -o-transform: translate(2px, 2px) rotate(0deg); } 100% { -o-transform: translate(1px, -2px) rotate(-1deg); } }
@-moz-keyframes spaceboots { 0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } }
@keyframes spaceboots { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
@-webkit-keyframes shake { 10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: translate3d(4px, 0, 0); } }
@-o-keyframes shake { 10%, 90% { -o-transform: translate3d(-1px, 0, 0); } 20%, 80% { -o-transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -o-transform: translate3d(-4px, 0, 0); } 40%, 60% { -o-transform: translate3d(4px, 0, 0); } }
@-moz-keyframes shake { 10%, 90% { -moz-transform: translate3d(-1px, 0, 0); } 20%, 80% { -moz-transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -moz-transform: translate3d(-4px, 0, 0); } 40%, 60% { -moz-transform: translate3d(4px, 0, 0); } }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
.booking-btn-area a:hover:hover img, .booking-btn-area a:hover:focus img{ -webkit-animation-name: spaceboots; -moz-animation-name: spaceboots; animation-name: spaceboots; -webkit-animation-duration: 2.8s; -moz-animation-duration: 2.8s; animation-duration: 2.8s; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; transform-origin:50% 50%; /*-webkit-animation-iteration-count: infinite;*/ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; }
.nav-icon{width: 25px; height: 20px; position: relative; margin-left: 20px; top: 10px; float: right;}
.nav-icon div{/*background: #fff none repeat scroll 0 0; height: 1px;*/ position: absolute; left: 0; top: 9px;
transition: opacity 0.5s, -webkit-transform 0.5s;
transition: transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
display: block;
width: 25px;
position: absolute;
top: 7px;
left: 0;
border-bottom: 1px solid #ffffff;
}
.mobile-nav span{position: relative; left: auto;}
.menu-text{float: left; position: relative; width: auto; display: block; min-width: 92px;}
.menu-text span{position: absolute; right: 0; display: block; white-space: nowrap; transition: opacity 0.5s, -webkit-transform 0.5s; transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;}
.menu-text span:last-child{opacity: 0;}
.mobile-nav:hover span:last-child{opacity: 1;}
.mobile-nav:hover span:first-child{opacity: 0;}
.nav-icon div:first-child{top: 0;}
.nav-icon div:last-child{top: 14px;}
.mobile-nav:hover .nav-icon div:first-child{-webkit-transform: rotate(30deg) translateX(2.8px) translateY(6.4px); -ms-transform: rotate(30deg) translateX(2.8px) translateY(6.4px);transform: rotate(30deg) translateX(2.8px) translateY(6.4px);}
.mobile-nav:hover .nav-icon div:nth-child(2){opacity: 0;}
.mobile-nav:hover .nav-icon div:last-child{ -webkit-transform: rotate(-30deg) translateX(2.8px) translateY(-6.4px); -ms-transform: rotate(-30deg) translateX(2.8px) translateY(-6.4px); transform: rotate(-30deg) translateX(2.8px) translateY(-6.4px);}
.header-area{float: none; width: auto; transition: color 0.4s; display: block;}
.logo-area{float: none; width: auto;}
.booking-btn-area {position: fixed; z-index: 99; white-space: nowrap; }
.mobile-nav{position: fixed;}
.logo {position: fixed; z-index: 99; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);}
.main-nav-wrap { left: 0; right: 0; position: fixed; top: 100%; z-index: 89; height: 100%; overflow: auto; opacity: 0; background: rgba(51,63,78,.97); transition: opacity 1s; transition-delay: 0s;}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment