Tutorial

Responsive Navigation: Don’t Over-complicate It.

Posted on by

I’ve come across many who have struggled time and time again with responsive navigation. My response is, it doesn’t need to be a struggle! I’ve put together an example that shows you that it doesn’t need to be very complicated and doesn’t need to cause you any headaches. All you need is a few lines of jQuery, some basic CSS, and a basic knowledge of media queries. Personally, I’m a big advocate of using SASS, so I’ve written my demo using that. If you’re not a SASS user, I recommend you give it a try.

If you’d like to just get straight to the code and demo, feel free to do so, but I will go over it in more detail below.

View Full Demo

Set Up Your Navigation

First things first. You’ll want to write out your HTML for the navigation to your site. Now, keep in mind, you’re going to need a button for your mobile navigation once the screen size gets smaller. Personally, I like to add in a link with the class of “mobile” right about my nav tag. I feel like this gives me more control over it’s positioning when it comes to styling it as opposed to having it as the first item of the navigation. Here is the basic HTML I’ve set up to get your navigation with drop downs started:

HTML


<a class="mobile" href="#">&#9776;</a>
<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a>
      <ul>
        <li><a href="#">Sublink 1</a></li>
        <li><a href="#">Sublink 2</a></li>
        <li><a href="#">Sublink 3</a></li>
        <li><a href="#">Sublink 4</a></li>
      </ul>
    </li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a>
     <ul>
       <li><a href="#">Sublink 1</a></li>
       <li><a href="#">Sublink 2</a></li>
       <li><a href="#">Sublink 3</a></li>
       <li><a href="#">Sublink 4</a></li>
     </ul>
   </li>
   <li><a href="#">Link 5</a></li>
   <li><a href="#">Link 6</a></li>
  </ul>
<div style="clear:both;"></div>
</nav>

 

Styling Your Navigation

Next, you’ll need to start styling your navigation and drop downs. I don’t really want to worry about the mobile version of the navigation just yet, so work on styling your navigation how you want it on your desktop. Also, since we don’t need our mobile navicon to be displayed until a certain screen size, we need to be sure to not have that showing just yet. I’ve written my drop downs all in CSS using this code:

SASS


nav {
  width:100%;
  background: linear-gradient(to bottom, #353535 0%,#262626 100%);
  box-shadow:0px 2px 2px rgba(0,0,0,.35);  
}

nav ul {
  margin:0;
  list-style:none;
  @include transition-duration(1s); 

  li {
    float:left;
    position:relative;
    z-index:1;

  a {
      display:block;
      padding: 15px 20px;
      text-align:center;
      color:white;
      text-decoration:none;
      border-right:1px solid #373737;
      text-shadow:2px 2px 2px rgba(0,0,0,.8);
      @include transition-duration(0.1s);

      &:hover {
        background:#262626;
        color:#00aedb;
        @include transition-duration(0.2s);
      }
    }

    &:hover ul {
      opacity:1;
      max-height:1000px;
      @include transition-duration(0.3s);   
    }

    /******************
    SUBNAV
    ******************/

    ul {
      background:#262626;
      list-style:none;
      padding:0;
      position:absolute;
      width:200px;
      max-height:0;
      z-index:0;
      opacity:0;
      overflow:hidden;
      font-size:.9em;
      box-shadow:0px 2px 2px rgba(0,0,0,.5);
      @include transition-duration(0.3s);

      li {
        float:none;
        margin:0;

        @include breakpoint(715) {
          margin:0;
        }

        a {
          display:block;
          text-align:left;
          padding:10px 5px;
          margin:0;
          border-right:none;
          border-top:1px solid rgba(0,0,0,.15);
          box-shadow:inset 0px 1px 3px rgba(255,255,255,.03);
          text-transform:none;
          text-shadow:none;
          @include transition-duration(0.2s);

          &:hover {
            color:black;
            background:#f5eded;
            @include transition-duration(0.5s);
          }
        }
      }
    }
  }
}
/***************************
MOBILE NAV STYLES
***************************/
.mobile {
  display:none;
}

 

So, now we have our navigation and drop downs styled, looking good, and we’ve hardly done any coding at all (just the way I like it). Depending on your design, you will want to modify this code to and make any responsive adjustments needed. I just wanted to start you off  as basic as possible.

Creating the Mobile Navigation

To finish off your responsive navigation, you have to create a mobile version. This is where many can struggle and over think how to get your mobile navigation working how you want. There are only a few steps you’ll need to follow to accomplish that:

  •  Activate mobile navicon
  • Add in breakpoints to CSS to style the mobile version of your navigation
  • Add a little jQuery to allow the user to tap and activate the navigation drop downs.

Now is the time you’ll want to add in your breakpoints to your navigation and style the mobile version of your navigation accordingly.

Next, you’ll want to add in the jQuery to get this navigation working. Basically, all the jQuery does, it toggle a couple of classes that will activate the viewing of the drop downs. It will also detect if any list item contains a drop down, and add in an arrow to indicate to the user that there is a sub-navigation. Here’s how it goes:

jQuery


$(document).ready(function() {
    $('.mobile').click(function () {
    $('nav').toggleClass('active'); 
  });

    $('nav ul li ul').each(function() {
    $(this).before('');
  });

    $('nav ul li').click(function() {
    $(this).children('ul').toggleClass('active');
    $(this).children('.arrow').toggleClass('rotate');
  });
});

See, nothing too scary or complicated. You’ll notice in the jQuery, there are a few extra classes that trigger the navigation to open, and add in an arrow on the links with sub-menus  for some nice user experience. Our last step will be to add in those extra classes using the following CSS to the bottom of your stylesheet:

SASS


/***************************
MOBILE NAV STYLES
***************************/
.mobile {
  display:none;
  margin:0;
  padding:20px 15px;
  background: linear-gradient(to bottom, #353535 0%,#262626 100%);
  position:absolute;
  color:white;
  text-decoration:none;
  top:15px;
  right:15px;
  line-height:0;
  box-shadow:0px 2px 2px rgba(0,0,0,.35);

  @include breakpoint(715) {
    display:table;
  }
}

.active {
  max-height:9000px !important;
  @include transition-duration(1s);
 }

@include breakpoint(715) {
  .arrow {
    display:block;
    background:url(http://www.jasonkinney.me/images/arrow.png) no-repeat;
    float:right;
    height:30px;
    width:30px;
    position:absolute;
    right:25px;
    top:10px;
    @include transition-duration(0.3s);

    &:hover {
      cursor:pointer;
    }
  }

  .rotate {
	  @include transition-duration(0.3s);
	  -webkit-transform:rotate(-180deg);
      -moz-transform:rotate(-180deg);
       -o-transform:rotate(-180deg);
          transform:rotate(-180deg);
  }
}

After you add in those final mobile styles, you should be set to go. To view the full version of the code and see it in action, please visit the demo page below.

View Full Demo

Leave a Reply