It’s easier than you think to create a simple horizontal responsive menu with just some CSS3 media queries and jQuery. This example doesn’t include any multi-tier drop downs, but for the sake of keeping things simple, here’s a great solution. No plugin required.

The Completed Product

See the Pen Simple Responsive Horitzontal Menu by Richard (@barkins) on CodePen.

In the above embed, you’re looking at the mobile version of the menu. Check out the full screen demo and resize the browser window to see it in action.

HTML

The HTML for this simple menu is relatively straightforward. Wrapped in a NAV tag, you’ll need to include the actual menu wrapped in a DIV so that you can targeted it later. Additionally, you’ll need to include the trigger link.

<nav>
  <a href="/" id="trigger">Menu</a>
  
  <div id="menu">
  <a href="/">Home</a><a href="/">About</a><a href="/">Information</a><a href="/">Contact</a></div>
</nav>

CSS

The only key item in the CSS is the media query section, otherwise you’re free to style the list of menu links however you like. Here’s my example.

* {
  box-sizing: border-box;
}

#trigger {
  background:#cc3300;
  padding:15px;
  color:#FFF;
  text-decoration:none;
  text-transform:uppercase;
  display:inline-block;
  width:100%;
  
  display:none;
}

nav {
  background:#CCC;
  text-align:center;
  padding:5px;
  font-family:sans-serif;
}

#menu {
  background:#999
}

#menu a{
  display:inline-block;
  background:#999;
  padding:15px;
  color:#FFF;
  text-decoration:none;
  text-transform:uppercase;
}

#menu a:hover {
  background:#666;
}

@media screen and (max-width:760px){
  #trigger {
    display:block;
  }
  #menu {
    display:none;
  }
  #menu a {
    display:block;
  }
}

@media screen and (min-width:760px){
  #menu {
    display:block !important;
  }
}

jQuery

I find it’s best to utilize the “slideToggle” function in jQuery to determine the height of the menu links container. I recall seeing examples of this where the jQuery had to find out the height of all the links once revealed, but that’s not very good future proofing. If you add more links, it will cause issues.

You first start by creating the trigger by selecting the “trigger” ID and add an ON function to toggle the menu to show and hide whenever a user clicks on the trigger.

Note: Include the “preventDefault” function inside the click event so that the browser doesn’t try to following the href inside the trigger link. Alternatively, you can create a button instead of a link, but that’s up to you and your browser support (HTML5 compatibility) needs.

$('#trigger').on("click", function(e){
  e.preventDefault();
  $('#menu').slideToggle('fast');
});

And that’s all folks!