Mic.com Style Fullscreen Navigation with jQuery and CSS3
File Size: | 3.19 KB |
---|---|
Views Total: | 1101 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A responsive & fullscreen navigation system inspired by Mic.com that allows you to navigate through different categories with a subtle CSS3 transition effect. Built by Html5, CSS/CSS3, and a little Javascript(jQuery) magic.
See also:
- Responsive & Dynamic Full Screen Navigation Plugin - fullpagenav
- Flexible Fullscreen Navigation Menu with jQuery and CSS3
- Fullpage Animated Menu Plugin with jQuery and CSS3 - Full Page Menu
How to use it:
1. Include the required CSS and web fonts in the head section of your page.
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Coustard:400,900" rel="stylesheet"> <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
2. Create the Html for the navigation menu.
<nav role="navigation"> <ul class="nav"> <li data-menu="Policy"> <a href="#">Policy</a> </li> <li data-menu="Arts"> <a href="#">Arts</a> </li> <li data-menu="World"> <a href="#">World</a> </li> <li data-menu="Sports"> <a href="#">Sports</a> </li> <li data-menu="Music"> <a href="#">Music</a> </li> <li data-menu="Identity"> <a href="#">Identity</a> </li> <li data-menu="News"> <a href="#">News</a> </li> </ul> </nav>
3. Create the Html for the recent articles when you hover over the menus.
<div class="stories"> <div class="most-viewed">Most viewed today in <span>policy</span>.</div> <div class="category policy"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> <div class="category arts"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> <div class="category world"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> <div class="category sports"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> <div class="category music"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> <div class="category identity"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> <div class="category news"> <figure> <img src="1.jpg" alt="" /> <figcaption> Description 1. </figcaption> </figure> <figure> <img src="2.jpg" alt="" /> <figcaption> Description 2. </figcaption> </figure> <figure> <img src="3.jpg" alt="" /> <figcaption> Description 3. </figcaption> </figure> <figure> <img src="4.jpg" alt="" /> <figcaption> Description 4. </figcaption> </figure> </div> </div>
4. And then wrap them into a wrapper with class of 'menu'.
<div class="menu"> ... </div>
5. The required CSS styles for the fullscreen navigation menu.
*, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { background: #f5f5f5; } .menu { padding: 1em; height: 100%; width: 100%; color: white; } .nav { width: 50%; float: left; } .nav li { font-size: 6em; font-family: "Coustard", arial, serif; font-weight: bold; text-transform: uppercase; display: block; line-height: 1.1; text-align: right; } .nav li:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAFUlEQVQIW2NkQAKMUPZ/IM0I44DFABJxAQQMGKylAAAAAElFTkSuQmCC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(1):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPbr1NT/orNnM4I5MAAASUUEBHf1/LwAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(2):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPaKprf/I+qEGcEcGAAASs0EBOX90nwAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(3):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIHbGpGf/Z+RJMYI5MAAASfEEBPPbldMAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(4):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPbmWb7/fdM2M4I5MAAASNkEBEaKR7gAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(5):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMILZDq+n/A9WnGcEcGAAARlkEBMndkgEAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(6):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPbmWb7/fdM2M4I5MAAASNkEBEaKR7gAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav li:nth-child(7):hover:before { content: attr(data-menu); position: absolute; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPbr1NT/orNnM4I5MAAASUUEBHf1/LwAAAAASUVORK5CYII=); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: -1; } .nav a { color: transparent; } .stories { width: 50%; float: left; padding: 1.5em 15% 0 3em; color: #222; font-family: "Oswald", arial, sans-serif; position: relative; } .stories .most-viewed { font-size: 1.3em; display: block; border-bottom: 1px solid black; text-transform: uppercase; } .category { position: absolute; left: 0; top: 0; padding: 3em 50% 0 3em; opacity: 0; transition: .3s; } .category figure { opacity: 0; margin: 0; display: block; clear: both; left: 15px; position: relative; transition-duration: .3s; } .category figure img { float: left; margin: 0 1em 1em 0; height: 150px; width: 150px; } .category figcaption { margin: 1em 0; font-weight: 300; font-size: 1em; } .show figure:nth-child(1) { transition-delay: 0.12s; } .show figure:nth-child(2) { transition-delay: 0.24s; } .show figure:nth-child(3) { transition-delay: 0.36s; } .show figure:nth-child(4) { transition-delay: 0.48s; } .category.show { opacity: 1; } .category.show figure { opacity: 1; left: 0; transition-duration: .2s; } @media (max-width: 1250px) { html { font-size: 70%; } .category { padding-right: 25%; } .category figure { font-size: 1.25em; } .category figure img { height: 115px; width: 115px; } } @media (max-width: 900px) { .nav { width: 100%; padding: 0; } .nav li { text-align: center; } .stories { display: none; } } @media (max-width: 700px) { html { font-size: 40%; } .nav a { color: #222; line-height: 1.45; text-decoration: none; } .nav li:before { content: ''; } .nav li:hover:before { content: '' !important; } }
6. Include the latest version of jQuery library at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7. The Javascript to enable the fullscreen navigation menu.
(function($){ var Menu = function(){ this.$nav = $('.nav'); this.$stories = $('.stories'); } Menu.prototype.init = function(){ this.initialState(); this.ui(); } Menu.prototype.initialState = function(){ var i = 0, $img = $('.category').eq(0).find('img'); $img.load(function(){ i++; //wait for all images to load if (i === $img.length) { $(this).parent().parent().addClass('show'); } }); } Menu.prototype.ui = function(){ var self = this; //show recent articles on hover self.$nav.on('mouseenter', 'li', function(){ var $this = $(this); $('.category') .removeClass('show') .eq($this.index()) .css('left', 0) .stop(true, true) .addClass('show'); self.$stories .find('span') .text( $this.attr('data-menu') ); }); } var menu = new Menu().init(); }(jQuery))
This awesome jQuery plugin is developed by trhino. For more Advanced Usages, please check the demo page or visit the official website.