JS tips: Creating your own custom responsive navigation with CSS & jQuery

Published Oct 07, 2017Last updated Oct 09, 2017
JS tips: Creating your own custom responsive navigation with CSS & jQuery

Responsive navigation is a must for a responsive website these days. Usually you get it by default from a design framework, such as Bootstrap or Zurb Foundation.

The challenge

However, these defaults are too common and may not suit your design, customising them could be a waste of your precious time. For an example, this is the default from Bootstrap:

navbar-collapse.png

navbar-expand.png

But you are after something neater and elegant:

cupola--02.png

Or:

simon-02.png

A solution

Creating your own custom responsive navigation above is fairly easy. You can just use CSS & jQuery with just a few lines of code to help you to achieve that.

  1. Create a normal navigation with either Bootstrap or Foundation (I prefer Foundation):
  <nav class="nav-main">

    <!-- row -->
    <div class="row row-nav">

      <!-- container -->
      <div class="grid-container">

        <!-- grid-x -->
        <div class="grid-x grid-padding-x">

          <div class="cell small-12 show-for-small-only">
            <a href="#" class="button-launch-overlay-menu vertical-center-left"><i class="material-icons">menu</i></a>
          </div>

          <div class="cell medium-12 hide-for-small-only">
            <ul class="dropdown menu align-center">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a>
                <ul class="menu nested vertical">
                  <li><a href="#">Item 2A</a></li>
                  <li><a href="#">Item 2B</a></li>
                  <li><a href="#">Item 2C</a></li>
                </ul>
              </li>
              <li><a href="#">Three</a>
                <ul class="menu nested vertical">
                  <li><a href="#">Item 3A</a></li>
                  <li><a href="#">Item 3B</a></li>
                  <li><a href="#">Item 3C</a></li>
                </ul>
              </li>
              <li><a href="#">Four</a></li>
            </ul>
          </div>

        </div>
        <!-- grid-x -->

      </div>
      <!-- container -->

    </div>
    <!-- row -->

  </nav>
  1. Create the navigation that you want to display on small screens:
<nav class="nav-overlay">

  <!-- row -->
  <div class="row row-nav">

    <!-- grid-x -->
    <div class="grid-x grid-padding-x">
      <div class="cell small-12">
        <a href="#" class="button-exit-overlay-menu vertical-center-left"><i class="material-icons">close</i></a>
      </div>
      <div class="cell small-12">
        <ul class="vertical menu accordion-menu align-left">
          <!-- to be appended via JavaScript -->
        </ul>
      </div>
    </div>
    <!-- grid-x -->

  </div>
  <!-- row -->

</nav>
  1. Create a .nav-overlay class in your CSS with position: fixed and set display: none:
.nav-overlay {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

  background-color: #ffffff; // fallback
  background: rgba(255, 255, 255, 1); // no transparency

  &.is-open {
    display: block;
  }
}
  1. Use jQuery to clone/ copy the inner elements of .menu.dropdown to .menu.accordion-menu:
// Define elements.
var menuDropdown = $('.menu.dropdown')
var menuAccordion = $('.menu.accordion-menu')

// Clone the inner elements of ul.menu.dropdown.
var $clone = menuDropdown.html()
menuAccordion.append($clone)
  1. Set display:block on .menu.accordion-menu on the click event on .button-launch-overlay-menu button:
// Overlay menu.
var navOverlay = $('.nav-overlay')
var buttonLaunch = $(".button-launch-overlay-menu")
var buttonExit = $(".button-exit-overlay-menu")

buttonLaunch.on("click", function(){
  navOverlay.addClass("is-open")
  return false
})

buttonExit.on("click", function(){
  navOverlay.removeClass("is-open")
  return false
})

Suggestions

Let me know what you think and what would be your solutions. Anything suggestions, please leave a comment below. Hope this helps. You can get the source above on GitHub. You can see how it works here too.

Discover and read more posts from LAU TIAM KOK
get started
Enjoy this post?

Leave a like and comment for LAU