Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding Side Navigation to your Website

Adding side navigation to your website allows you to deliver an improved user experience (UX) and make it easier for users to navigate your website on desktop and mobile devices.

Adding side navigation to your website allows you to deliver an improved user experience (UX) and makes it easier for users to traverse your website. Side navigation also allows you to add more content and functionality such as social share and search to your website navigation while maintaining a clean, modern design.

Below is the HTML, CSS, and JavaScript needed to add side navigation to your website. Enjoy.

Step 1 - Add the HTML below to the main navigation of your website

<button id="sidenav-toggle">
  <img alt="Hamburger" src="https://www.solodev.com/assets/side-nav/hamburger.png">
</button>

The above code creates the basic "Hamburger" icon which a user can click on to expand the side navigation menu.

Step 2 - Add the HTML below to under the closing footer tag of your website

//Replace the logo, links, and social share to those relevant to your website.
<div class="ct-sidenav">
  <button class="close">×</button><img alt="Logo" class="ct-sidenav-logo" src="https://www.solodev.com/assets/side-nav/logo.png">
  <ul class="list-unstyled ct-sidenav-list">
    <li>
      <a href="/about-us/">About Us</a>
    </li>
    <li>
      <a href="/about-us/team/">Team</a>
    </li>
    <li>
      <a href="/about-us/blog/">Blog</a>
    </li>
    <li>
      <a href="/services/">Services</a>
    </li>
    <li>
      <a href="/contact-us.stml">Contact Us</a>
    </li>
  </ul>
  <div class="inner">
    <div class="separator"></div>
    <div class="ct-footer-header">
      Get in Touch
    </div>
    <div class="address">
      <span>123 Easy Street</span><span>Orlando, FL 32801</span>
    </div>
    <div class="ct-footer-header">
      Join Us
    </div>
    <ul class="ct-socials list-inline list-unstyled">
      <li class="ct-socials--facebook">
        <a href="//www.facebook.com/webcorpco"><img alt="Facebook" src="https://www.solodev.com/assets/side-nav/facebook.png"></a>
      </li>
      <li class="ct-socials--linkedin">
        <a href="//www.linkedin.com/"><img alt="Linkedin" src="https://www.solodev.com/assets/side-nav/linkedin.png"></a>
      </li>
      <li class="ct-socials--twitter">
        <a href="//www.twitter.com/webcorpco"><img alt="Twitter" src="https://www.solodev.com/assets/side-nav/twitter.png"></a>
      </li>
    </ul>
    <div class="ct-u-paddingTop60"></div>
    <form class="ct-search form-group form-inline" action="/search.stml">
      <label class="sr-only" for="search">Search</label> <input id="search" class="form-control" name="q" required="" type="text"> <button class="btn btn-primary" type="submit">Search</button>
    </form>
  </div>
</div>

The HTML above creates the structure of the menu once it is expanded. By default, this section is hidden on page load.

Step 3 - Add the JavaScript below to a file called side-nav.js

 $('.sidenav-toggle').on('click', function() {
  var $sidenav, $this;
  $this = $(this);
  $sidenav = $('.ct-sidenav');
  if ($this.hasClass('active')) {
    $this.removeClass('active');
    return $sidenav.removeClass('active');
  } else {
    $this.addClass('active');
    return $sidenav.addClass('active');
  }
});
$('#sidenav-toggle').on('click', function() {
  var $sidenav, $this;
  $this = $(this);
  $sidenav = $('.ct-sidenav');
  if ($this.hasClass('open')) {
    $this.removeClass('open');
    return $sidenav.removeClass('open');
  } else {
    $this.addClass('open');
    return $sidenav.addClass('open');
  }
});
$('.ct-sidenav').find('button.close').on('click', function() {
  $(this).parent().removeClass('open');
  return $('#sidenav-toggle').removeClass('open');
});

The needed JavaScript is fairly straightforward. A number of onclick events add or remove css classes depending on the circumstances of the click.

Step 4 - Add the CSS below to the main stylesheet of your website

body {
  background-color: #a9a9a9;
}
#sidenav-toggle img:hover {
  background-color: #00a7e8;
}
#sidenav-toggle img {
  -webkit-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
  padding: 10px 8px;
  padding: 1rem 0.8rem;
}
#sidenav-toggle {
  position: absolute;
  top: 0;
  right: 10px;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 28px;
  font-size: 2.8rem;
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  line-height: 70px;
  line-height: 7rem;
}
.ct-sidenav.open {
  right: 0;
}
.ct-sidenav {
  width: 343px;
  width: 34.3rem;
  height: 100%;
  position: fixed;
  z-index: 9990;
  top: 0;
  right: -34.3rem;
  background: #191320;
  padding: 75px 0 20px;
  padding: 7.5rem 0 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-transition: right 0.25s ease-in-out;
  transition: right 0.25s ease-in-out;
  color: #b7b6b6;
}
.ct-sidenav .close {
  position: absolute;
  top: 7px;
  top: 0.7rem;
  right: 15px;
  right: 1.5rem;
  text-shadow: none;
  color: #fff;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  font-size: 80px;
  font-size: 8rem;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  font-weight: lighter;
}
.ct-sidenav-logo {
  max-width: 150px;
  max-width: 15rem;
  position: absolute;
  top: 30px;
  top: 3rem;
  left: 60px;
  left: 6rem;
}
.ct-sidenav-list {
  padding: 50px 0 30px;
  padding: 5rem 0 3rem;
  color: #6e6e6e;
  font-size: 22px;
  font-size: 2.2rem;
}
.ct-sidenav-list > li {
  -webkit-transition: background-color 250ms ease-in-out;
  transition: background-color 250ms ease-in-out;
}
.ct-sidenav-list > li > a, .ct-sidenav-list > li button {
  font-family: 'Open Sans Condensed', sans-serif;
}
.ct-sidenav-list > li > a, .ct-sidenav-list > li button {
  display: inline-block;
  text-align: left;
  width: 100%;
  padding: 8px 25px 8px 65px;
  padding: 0.8rem 2.5rem 0.8rem 6.5rem;
  border: none;
  background-color: transparent;
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: 26px;
  font-size: 2.6rem;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  text-transform: uppercase;
}
.ct-sidenav .inner {
  padding-left: 65px;
  padding-left: 6.5rem;
}
.ct-sidenav .separator {
  width: 100%;
  height: 1px;
  height: 0.1rem;
  background-color: rgba(255,255,255,0.2);
  max-width: 185px;
  max-width: 18.5rem;
  display: inline-block;
  margin-top: 35px;
  margin-top: 3.5rem;
}
.ct-sidenav .ct-footer-header {
  padding-bottom: 15px;
  padding-bottom: 1.5rem;
}
.ct-footer-header {
  font-family: 'Open Sans Condensed', sans-serif;
}
.ct-footer-header {
  color: #00bff3;
  text-transform: uppercase;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 700;
  padding: 30px 0 25px;
  padding: 3rem 0 2.5rem;
}
.address {
  font-size: 14px;
  font-size: 1.4rem;
}
.address span {
  display: block;
  margin-top: 5px;
  margin-top: 0.5rem;
}
.ct-sidenav .ct-footer-header {
  padding-bottom: 15px;
  padding-bottom: 1.5rem;
}
ul {
  margin-bottom: 0;
  font-size: 1.7rem;
}
.ct-u-paddingTop60 {
  padding-top: 60px;
  padding-top: 6rem;
}
.ct-search.form-group {
  width: 100%;
  display: block;
  padding-right: 25px;
  padding-right: 2.5rem;
}

The above CSS creates a fixed menu when it's expanded.

Step 5 - Add the following includes to the header of your website

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="side-nav.js"></script>

With side navigation on your website, you improve the desktop and mobile experience for users with room for additional content and functionality. Adding side navigation to your website is easy with a bit of HTML and JavaScript and doesn't require any plugins. We highly advise adding side-navigation to your website to improve your website's mobile experience in the ever-increasingly mobile world.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

Terms Privacy Policy Contact