1stwebdesigner

Create a Sliding Navigation Menu in CSS3 and jQuery 4 Easy Steps

Posted: 16 Apr 2014 06:00 AM PDT

There are many ways to create a navigation menu for the Web. One of the most popular navigation menus is the accordion look drop-down navigation that slides up and down, showing its sub-menus when toggled.

In this tutorial, we’re going to build a sliding navigation menu using CSS3, along with some jQuery codes to manage the sliding animation.

Let’s get started.

The Final Output

Download Source Files View Demo

Using Font Awesome (Web Icons)

For this tutorial, instead of using ordinary .png icons for our sliding navigation, we will be using Font Awesome. There are a lot of advantages in using web fonts or web icons:

There are variety of icons to choose from
You can save money; you don’t need to pay for the icons
You can save time; you quickly use CSS to incorporate them in your design
Faster load time – Web fonts/icons automatically keep up with the new versions of web browsers
Web fonts/icons are SEO-friendly

There are two ways on how to use Font Awesome in our design project. The first one is by using BootstrapCDN link to your HTML markup and the second one is by downloading the Font Awesome files from the Font Awesome website and then use the Default CSS link to your HTML Markup. To learn more about this, you can check the Font Awesome getting started page.

For this tutorial, I will be using the BootstrapCDN link to access the Font Awesome web fonts/icons.

The Markup

On our HTML file, we will add first the HTML5 doctype and series of links on our head section. This will include our link to the CSS file, BootstrapCDN link and our jQuery library file.

  <!DOCTYPE html>  <html lang="en">      <head>         <title>Create a Sliding Navigation using CSS3 and Jquery</title>          <link rel="stylesheet" href="css/style.css"/>          <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">  	   <script type="text/javascript" src="js/jquery.js"></script>      </head>

The HTML structure for the menu will be an unordered list where the parent menu element is formatted in an H3 tag. The H3 tag consists of an icon menu span wrapped in a div tag. The parent menu element will have a plus (+) or a minus (-) sign icon (when toggled) if it has sub-menu elements using Font Awesome web fonts/icons. Notice that Font Awesome used the icon (i) tag to show its icons. You can check here the Font Awesome code class database along with its icons.

          <ul id="toggle">      <li>          <div class="active"> <span class="menu-icons home"><i class="menu-icons fa fa-home"></i>  </span>               <h3>HOME</h3>          </div>      </li>        <li>          <div><span class="menu-icons about"> <i class="fa fa-user"></i> </span>  			<h3>ABOUT US</h3>  				<span class="the-btn"><i class="fa fa-plus"></i></span>  					<div class="clear"></div>          </div>  			<ul>  				<li><a href="#">OUR TEAM</a></li>  				<li><a href="#">OUR SERVICES</a></li>  			</ul>      </li>        <li>          <div><span class="menu-icons portfolio"><i class="fa fa-briefcase"></i> </span>               <h3>PORTFOLIO</h3>  				<span class="the-btn"><i class="fa fa-plus"></i></span>          </div>  			<ul>  				<li><a href="#">WEB DESIGN</a>  				</li>  				<li><a href="#">GRAPHIC DESIGN</a>  				</li>  			</ul>      </li>        <li>          <div> <span class="menu-icons contact"><i class="fa fa-envelope"></i> </span>               <h3>CONTACT</h3>          </div>      </li>  </ul>

So by this time, if you will check this on your web browser, you will get the same output like the image below.

html

The CSS

The style for this tutorial consists of displaying the parent element block, and hiding the sub-menus of the parent menus, the background color, menu icons and the plus and minus sign icons.

For this part, we styled the parent menus, giving them width and background colors together with hover and active states and styled the H3 tag, which is the parent menu title.

  body {      width: 100%;      background: #fff;  }  #toggle {      width: 240px;      list-style: none;      margin: 170px auto;  }  #toggle div:hover {      background: #f3b784;  }  #toggle div.active {      background: #f3b784;  }  #toggle div {      background-color: #f58220;      cursor: pointer;      display: block;      margin: 1px;  }  #toggle h3 {      font-size: 14px;      margin: 0;      padding: 0;      font-family: Tahoma;      color: #fff;      line-height: 41px;      font-weight: normal;      text-shadow: 1px 1px 0px #adadad;      filter: dropshadow(color=#adadad, offx=1, offy=1);  }  .clear {      clear: both;      display: block;      overflow: hidden;      visibility: hidden;  }

So by this time, if you will check this on your web browser, you will get the same output like the image below.

next-out

Next, we will put the menu icons on the left and the plus sign icon on right.

 span.menu-icons {      font-size: 26px;      height: 20px;      width: 22px;      float: left;      margin: 6px 12px 10px 12px;      color: #fff;  }  span.the-btn {      float: right;      font-size: 26px;      height: 30px;      width: 43px;      margin-top: -34px;  	margin-right: -10px;      padding:0;      color: #fff;  }

It is expected right now that you’ll have the same look like the image below.

Lastly, we will be putting styles on sub-menus but, by default, we will hide them and then animate them using jQuery later on.

  #toggle ul {      list-style: none;      display: none;      background-color:#f3b784;      color: fff;  }  #toggle ul li {      line-height: 41px;      color: #fff;      list-style: circle;      width: 240px;      padding: 0;      margin: 0;  }  #toggle a {      text-decoration: none;      color: #fff;      font-family: Tahoma;      font-size: 14px;      text-shadow: 1px 1px 0px #adadad;      filter: dropshadow(color=#adadad, offx=1, offy=1);  }  #toggle a:hover {      color: #f58220;  }

You will get the same output like the image below.

wo-jquery

The jQuery Sliding Effect

When the entire block element is displaying properly, we need to create the JavaScript effect. In my jQuery code, I created a variable to take a reference of the current menu icon by using the code: $currIcon=$(this).find(“span.the-btn > i”)

Then, I change all the icons back in the compressed state (the plus icon). Next, using toggleClass, I switch plus/minus icons on the previously stored element $currIcon.

  $("#toggle > li > div").click(function () {      if (false == $(this).next().is(':visible')) {          $('#toggle ul').slideUp();      }        var $currIcon=$(this).find("span.the-btn > i")        $("span.the-btn > i").not($currIcon).addClass('fa-plus').removeClass('fa-minus');        $currIcon.toggleClass('fa-minus fa-plus');        $(this).next().slideToggle();        $("#toggle > li > div").removeClass("active");      $(this).addClass('active');    });

Final Thoughts

This tutorial offers web developers and designers a basic relatively simple understanding how to create a sliding menu navigation. There are a lot of styles for a navigation menu out there but this one gives you a foundation on how this sliding effect will bring magic to your CSS. You are free to play around and customize if on your own liking and design.

Check out my live demo link above and see how this works to different browsers and let us know your thoughts about this tutorial.