Mobile-First Fullscreen Navigation Plugin - jQuery menuFullScreen.js

This lightweight jQuery plugin helps developers create a hamburger icon that expands to reveal a responsive, mobile-friendly fullscreen navigation menu when clicked/tapped.

Recognizing the challenge of limited screen real estate, this plugin smartly converts the text direction of menu items to vertical on smaller screens. This attention to detail ensures that the menu remains navigable and visually appealing, regardless of the device.

How to use it:

1. Code the HTML for the navigation menu and hamburger toggle button.

<!-- Hamburge Button -->
<div class="nav-trigger js_navbar">
  <span></span><span></span><span></span>
</div>

<!-- Nav Menu -->
<div class="nav-menu">
  <ul>
    <li>
      <a href="#">
        <h2 class="mt">Home</h2>
      </a>
    </li>
    <li>
      <a href="#">
        <h2 class="mb">JavaScript</h2>
      </a>
    </li>
    <li>
      <a href="#">
        <h2 class="mt">HTML5</h2>
      </a>
    </li>
    <li>
      <a href="#">
        <h2 class="mb">CSS/CSS3</h2>
      </a>
    </li>
  </ul>
</div>

2. Copy the CSS styles below and insert them into your document.

.nav-trigger {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 2%;
  right: 2%;
  z-index: 20;
  cursor: pointer;
  transition: top .2s ease-in;
}

.nav-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgb(61, 61, 61);
  margin: 7px auto;
  transition: all 0.2s ease-in;
}

.nav-trigger.on {
  top: 2%;
}

.nav-trigger.on span:first-child {
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger.on span:nth-child(2) {
  transform: translateX(50px);
  opacity: 0;
}

.nav-trigger.on span:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 19;
  overflow: hidden;
}

.nav-menu h2 {
  margin-top: 2em;
}

.nav-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  position: relative;
}

.nav-menu a {
  position: relative;
  float: left;
  margin: 0;
  width: 25%;
  height: 100vh;
  text-align: center;
  cursor: pointer;
  background: #FDD835;
  color: #222222;
  text-decoration: none;
  border: none;
  font-size: 0;
}

.nav-menu a:hover {
  background: #222222;
  color: #FDD835;
  border: none;
  text-decoration: none;
  transition: background 0.8s ease, color 0.3s ease; 
}

.nav-menu li {
  position: absolute;
  text-transform: uppercase;
  top: 45%;
  left: 0;
  position: relative;
}

.nav-menu h2.mb {
  margin-bottom: -20px;
  font-size: 2.25rem;
}

.nav-menu h2.mt {
  margin-bottom: -60px;
  font-size: 2.25rem;
}

.nav-menu.active {
  display: block;
}

.nav-menu.active + .close-button {
  display: block;
}

@media screen and (max-width: 768px) {

  .nav-menu {
    text-align: center; 
    text-decoration: none;
    border: none;
  }

  .nav-menu h2 {
    transform: rotate(-270deg);
    align-items: center;
    text-align: center;
    margin-top: 30vw;
  }

  .nav-menu ul li a {
    width: 25%; 
    text-decoration: none;
    border: none;
  }


  .nav-menu a:hover {
    border: none;
    text-decoration: none;
    border: none;
  } 

  .container {
    margin-top: 5vh;
  }

  .container h1 {
    font-size: 10vw;
    padding: 15vw;
  }

}

3. Load jQuery library and the menuFullScreen.js script in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/menuFullScreen.js"></script>

4. Override the default plugin options.

$(document).ready(function () {
  $('body').fullScreenMenu({
    menuTrigger: '.nav-trigger',
    closeButton: '.js_close_button',
    menuElement: '.nav-menu',
    containerElement: '.container',
    animationDuration: 200
  });
});

---

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