jQuery Plugins › jQuery Menu Plugins ›

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
   
Demo Download

More in this category...

View Recommended Plugins

TOP 100 jQuery Plugins 2022

Chrome, IE10+, FireFox, Opera, Safari#Responsive#Navigation
Mic.com Style Fullscreen Navigation with jQuery and CSS3

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:

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.