jQuery Plugin For Responsive Fullscreen Navigation Menu - Full Screen Nav

An unique jQuery menu plugin for creating a responsive full screen navigation menu that slides out from the top of the page and covers the main content with CSS3 transition effects.

How to use it:

1. Create a navigation menu with Html unordered lists.

<nav>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
...
</ul>
</nav>

2. Create a link to toggle the full screen navigation.

<a href="#" class="open-menu-btn">Menu</a>

3. The required CSS to style and animate the navigation.

a.open-menu-btn {
position: absolute;
top: 42%;
left: 0;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
display: block;
text-decoration: none;
text-align: center;
transition: color ease-in-out .25s, background-color ease-in-out .25s, text-shadow ease-in-out .25s;
}
a.open-menu-btn:after {
content: " ";
border-color: #039abe;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
transition: border-color ease-in-out .25s;
height: 4px;
height: 0.25rem;
width: 32px;
width: 2rem;
}
a.open-menu-btn:hover:after {
border-color: #0386a4;
}
a.close-menu-btn {
position: absolute;
color: #039abe;
text-decoration: none;
right: 15px;
right: 0.9375rem;
font-size: 36px;
font-size: 2.25rem;
}
a.close-menu-btn:hover {
color: #0386a4;
}
nav {
background: rgba(0, 38, 53, 0.9);
position: fixed;
top: -100%;
left: 0;
width: 100%;
z-index: 10;
transition: top ease-in-out .5s;
}
nav.open {
top: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li a {
color: #ab1a25;
text-shadow: 1px 1px 0 rgba(227, 72, 84, 0.75);
}
nav li a:hover {
background-color: #013440;
color: #7f131b;
text-shadow: 1px 1px 0 rgba(82, 13, 18, 0.75);
}

4. Load the latest jQuery library and jQuery Full Screen Nav plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.fullscreennav.min.js"></script> 

5. Call the plugin on the nav with default options.

<script>
$(function() {
$("nav").fullScreenNav();
});
</script>

6. Customization options.

<script>
$(function() {
$("nav").fullScreenNav({
baseFontSize: 16, // used to calculate rem’s.
closeMenuBtnText: "×", // text for the close button when the menu opens. Defaults to "× (&times; / multiplcation sign)"
closeMenuBtnClass: ".close-menu-btn", // class to add to close menu button.
fontSizeDivisor: 2.25, // "1" would make the font-size fill all available space. I found 2.25 to be visually appealing. The larger the number, the smaller the text will become.
menuBtn: ".open-menu-btn", // selector that, when clicked, opens the menu. You need to supply this in the html.
openClass: ".open" // class to add to nav menu when opening.});
});
</script>

Change log:

v0.1.4 (2014-02-18)

• Updated link click

---

This awesome jQuery plugin is developed by damonbauer. For more Advanced Usages, please check the demo page or visit the official website.