Cool Fullscreen Overlay Navigation with jQuery and CSS3
File Size: | 3.49 KB |
---|---|
Views Total: | 3284 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fullscreen overlay site navigation that comes with a cool timing transition effect based on jQuery and several CSS3 animation properties.
How to use it:
1. Create the fullscreen site navigation from a nav
list.
<div class="overlay-navigation"> <nav role="navigation"> <ul> <li><a href="#" data-content="Home">Home</a></li> <li><a href="#" data-content="About us">About</a></li> <li><a href="#" data-content="Contact us">Contact</a></li> <li><a href="#" data-content="Blog posts">Blog</a></li> <li><a href="#" data-content="Portfolio">Portfolio</a></li> </ul> </nav> </div>
2. Create a hamburger button inside the main container to toggle the fullscreen navigation.
<section class="main"> <div class="open-overlay"> <span class="bar-top"></span> <span class="bar-middle"></span> <span class="bar-bottom"></span> </div> </section>
3. The core CSS / CSS3 rules for the fullscreen navigation.
.overlay-navigation { position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 0%, 0%, 0.8); -webkit-transform: translateY(-100%); transform: translateY(-100%); } .overlay-slide-down { -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transform: translateY(0); transform: translateY(0) } .overlay-slide-up { -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-transform: translateY(-100%); transform: translateY(-100%) } nav, nav ul { width: 100%; height: 100%; margin: 0; padding: 0; } nav ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; } nav ul li { -webkit-flex-basis: 20%; -ms-flex-preferred-size: 20%; flex-basis: 20%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; overflow: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } nav li a { position: relative; top: 46%; color: #fff; text-transform: uppercase; font-family: 'roboto', sans-serif; font-weight: 300; letter-spacing: 4px; text-decoration: none; display: block; text-align: center; font-size: 0.9rem; } nav li a:before { content: ''; width: 70px; height: 2px; background-color: #fff; position: absolute; top: 50%; left: 0; z-index: 100; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear; } nav li a:after { content: attr(data-content); font-size: 0.7rem; -webkit-transition: all .2s linear; transition: all .2s linear; opacity: 0; position: absolute; z-index: 100; color: #fff; display: block; margin-right: auto; margin-left: auto; left: 0; right: 0; bottom: -50px; text-transform: none; font-family: 'roboto', serif; font-weight: 300; font-style: italic; letter-spacing: 0; } nav li a:hover:before { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } nav li a:hover:after { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 1; } nav li:nth-of-type(1) { background-color: #29363B } nav li:nth-of-type(2) { background-color: #EA495F } nav li:nth-of-type(3) { background-color: #F4837D } nav li:nth-of-type(4) { background-color: #FDCEA9 } nav li:nth-of-type(5) { background-color: #99B998 } .slide-in-nav-item { -webkit-animation: slide-in-nav-item 0.4s linear 1 .2s both; animation: slide-in-nav-item 0.4s linear 1 .2s both; } .slide-in-nav-item-delay-1 { -webkit-animation: slide-in-nav-item 0.4s linear 1 .4s both; animation: slide-in-nav-item 0.4s linear 1 .4s both; } .slide-in-nav-item-delay-2 { -webkit-animation: slide-in-nav-item 0.4s linear 1 .6s both; animation: slide-in-nav-item 0.4s linear 1 .6s both; } .slide-in-nav-item-delay-3 { -webkit-animation: slide-in-nav-item 0.4s linear 1 .8s both; animation: slide-in-nav-item 0.4s linear 1 .8s both; } .slide-in-nav-item-delay-4 { -webkit-animation: slide-in-nav-item 0.4s linear 1 1s both; animation: slide-in-nav-item 0.4s linear 1 1s both; } .slide-in-nav-item-reverse { -webkit-animation: slide-in-nav-item-reverse .3s linear 1 .5s both; animation: slide-in-nav-item-reverse .3s linear 1 .5s both; } .slide-in-nav-item-delay-1-reverse { -webkit-animation: slide-in-nav-item-reverse .3s linear 1 .4s both; animation: slide-in-nav-item-reverse .3s linear 1 .4s both; } .slide-in-nav-item-delay-2-reverse { -webkit-animation: slide-in-nav-item-reverse .3s linear 1 .3s both; animation: slide-in-nav-item-reverse .3s linear 1 .3s both; } .slide-in-nav-item-delay-3-reverse { -webkit-animation: slide-in-nav-item-reverse .3s linear 1 .2s both; animation: slide-in-nav-item-reverse .3s linear 1 .2s both; } .slide-in-nav-item-delay-4-reverse { -webkit-animation: slide-in-nav-item-reverse .3s linear 1 both; animation: slide-in-nav-item-reverse .3s linear 1 both; }
4. Style the hamburger menu toggler.
.open-overlay { position: absolute; right: 5rem; top: 3.2rem; z-index: 100; width: 34px; display: block; cursor: pointer; } .open-overlay span { display: block; height: 1px; background-color: #fff; cursor: pointer; margin-top: 8px; } .animate-top-bar { -webkit-animation: animate-top-bar .6s linear 1 both; animation: animate-top-bar .6s linear 1 both } .animate-bottom-bar { -webkit-animation: animate-bottom-bar .6s linear 1 both; animation: animate-bottom-bar .6s linear 1 both } .animate-middle-bar { -webkit-animation: animate-middle-bar .6s linear 1 both; animation: animate-middle-bar .6s linear 1 both } .animate-out-top-bar { -webkit-animation: animate-out-top-bar .6s linear 1 both; animation: animate-out-top-bar .6s linear 1 both } .animate-out-bottom-bar { -webkit-animation: animate-out-bottom-bar .6s linear 1 both; animation: animate-out-bottom-bar .6s linear 1 both } .animate-out-middle-bar { -webkit-animation: animate-out-middle-bar .6s linear 1 both; animation: animate-out-middle-bar .6s linear 1 both }
5. The animation keyframes.
@-webkit-keyframes slide-in-nav-item { from { -webkit-transform: translateY(-100%); transform: translateY(-100%) } to { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slide-in-nav-item { from { -webkit-transform: translateY(-100%); transform: translateY(-100%) } to { -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes slide-in-nav-item-reverse { from { -webkit-transform: translateY(0); transform: translateY(0) } to { -webkit-transform: translateY(-100%); transform: translateY(-100%) } } @keyframes slide-in-nav-item-reverse { from { -webkit-transform: translateY(0); transform: translateY(0) } to { -webkit-transform: translateY(-100%); transform: translateY(-100%) } } @-webkit-keyframes animate-top-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #fff } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @keyframes animate-top-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #fff } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @-webkit-keyframes animate-bottom-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px) } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: #fff; } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @keyframes animate-bottom-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px) } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: #fff; } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @-webkit-keyframes animate-middle-bar { 0% { background-color: #fff; } 80% { background-color: #fff; } 100% { background-color: #29363B; } } @keyframes animate-middle-bar { 0% { background-color: #fff; } 80% { background-color: #fff; } 100% { background-color: #29363B; } } @-webkit-keyframes animate-out-top-bar { 0% { background-color: #29363B } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #29363B } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #FFF; } } @keyframes animate-out-top-bar { 0% { background-color: #29363B } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #29363B } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #FFF; } } @-webkit-keyframes animate-out-bottom-bar { 0% { background-color: #29363B } 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px) } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: #29363B; } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #FFF; } } @keyframes animate-out-bottom-bar { 0% { background-color: #29363B } 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px) } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: #29363B; } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #FFF; } } @-webkit-keyframes animate-out-middle-bar { 0% { background-color: #29363B } 80% { background-color: #29363B; } 100% { background-color: #fff; } } @keyframes animate-out-middle-bar { 0% { background-color: #29363B } 80% { background-color: #29363B; } 100% { background-color: #fff; } }
6. Include the latest version of jQuery library at the bottom of the document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
7. The jQuery script to active the fullscreen navigation.
$('.open-overlay').click(function() { var overlay_navigation = $('.overlay-navigation'), nav_item_1 = $('nav li:nth-of-type(1)'), nav_item_2 = $('nav li:nth-of-type(2)'), nav_item_3 = $('nav li:nth-of-type(3)'), nav_item_4 = $('nav li:nth-of-type(4)'), nav_item_5 = $('nav li:nth-of-type(5)'), top_bar = $('.bar-top'), middle_bar = $('.bar-middle'), bottom_bar = $('.bar-bottom'); overlay_navigation.toggleClass('overlay-active'); if (overlay_navigation.hasClass('overlay-active')) { top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar'); middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar'); bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar'); overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down') nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item'); nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1'); nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2'); nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3'); nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4'); } else { top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar'); middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar'); bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar'); overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up') nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse'); nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse'); nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse'); nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse'); nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse'); } })
This awesome jQuery plugin is developed by fluxus. For more Advanced Usages, please check the demo page or visit the official website.