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:

But you are after something neater and elegant:

Or:

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>

2. 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>

3. 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;
  }
}

4. 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)

5. 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.