https://idea-hack.com/blog/29435/
3 instant codes for using fullscreen menu with ‘jQuery fatNav’

3 instant codes for using fullscreen menu with ‘jQuery fatNav’

We provide 3 instant code collection for fullscreen menu which is easily realized with ‘jQuery fatNav’.

“jQuery fatNav” that makes it easy to use fullscreen menu for template developers.

fullscreen menu makes it easy to introduce drawers to your site.

However, if you do not know how to use it is surprisingly difficult to implement. So I created instant code collection that so that you can introduce it easily.

jQuery fatNav | Chubby fullscreen menu with nice hamburger toggle.

Introduction

These are assets in demos in this post.

CSS

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://wplabo.idea-hack.com/library/jquery-fatNav-master/jquery.fatNav.min.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://wplabo.idea-hack.com/library/jquery-fatNav-master/jquery.fatNav.min.js"></script>

Code collection

1: Leave the default setting

css
body {
	color: #484848;
	font-family: 'Quicksand', sans-serif;
}
header {
	width: 100%;
	position: fixed;
	z-index: 99;
	margin: 60px auto;
}
JQuery
jQuery(function($){
	$.fatNav();
});

Fullscreen Nav Menu Ex:2 Customizing hamburger color

html
<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </div>
</div>
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">Fullscreen Nav Menu</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
css
body {
  color: #484848;
  font-family: 'Quicksand', sans-serif;
}

header {
  width: 100%;
  position: fixed;
  z-index: 99;
  margin: 60px auto;
}

.hamburger .hamburger__icon,
.hamburger .hamburger__icon:before,
.hamburger .hamburger__icon:after {
  background-color: red;
}
JQuery
jQuery(function($){
	$.fatNav();
});

Fullscreen Nav Menu Ex:3 Close button state:

html
<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </div>
</div>
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">Fullscreen Nav Menu</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
css
body {
	color: #484848;
	font-family: 'Quicksand', sans-serif;
}
header {
	width: 100%;
	position: fixed;
	z-index: 99;
	margin: 60px auto;
}
.hamburger .hamburger__icon, 
.hamburger .hamburger__icon:before, 
.hamburger .hamburger__icon:after {
    background-color: red;
}
.hamburger.active .hamburger__icon:before, 
.hamburger.active .hamburger__icon:after {
    background-color: green;
}
JQuery
jQuery(function($){
	$.fatNav();
});