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

Posted in Coding, HTML & CSS, Tutorials4 months ago • Written by 6 Comments

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

sliding-nav

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.

next

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.

37 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

6 Comments Best Comments First
  • Ayla

    Wednesday, April 16th, 2014 10:54

    1

    Hi. Why does it work only when you put at the bottom of the HTML file? Putting it inside doesn’t work.

    All works great though.

    0
  • Luke

    Thursday, April 17th, 2014 16:33

    2

    the menu icons are not showing up on mine. anyone helse having this problem or know why i would be?

    0
  • Thu Nguyen

    Thursday, May 1st, 2014 00:13

    6

    Thank you for the tutorial. However, I could not get the jQuery to work.
    All up to CSS and HTML work fine but not the jQuery. I do not know jQuery, I just copied everything to Notepad++ then linked to the HTML file. Is there anything I need to do before it can take effect?

    0
  • Heather

    Wednesday, April 23rd, 2014 08:15

    5

    I like the design of it. How would you enable “Portfolio” to be a link? So say you’d tap portfolio to open the sub menu, but tap portfolio again to go the main Portfolio page?

    0
  • Thu Nguyen

    Thursday, May 1st, 2014 00:13

    6

    Thank you for the tutorial. However, I could not get the jQuery to work.
    All up to CSS and HTML work fine but not the jQuery. I do not know jQuery, I just copied everything to Notepad++ then linked to the HTML file. Is there anything I need to do before it can take effect?

    0
  • Heather

    Wednesday, April 23rd, 2014 08:15

    5

    I like the design of it. How would you enable “Portfolio” to be a link? So say you’d tap portfolio to open the sub menu, but tap portfolio again to go the main Portfolio page?

    0
  • Luke

    Thursday, April 17th, 2014 16:33

    2

    the menu icons are not showing up on mine. anyone helse having this problem or know why i would be?

    0
  • Ayla

    Wednesday, April 16th, 2014 10:54

    1

    Hi. Why does it work only when you put at the bottom of the HTML file? Putting it inside doesn’t work.

    All works great though.

    0

Comments are closed.

54.83.239.145 - unknown - unknown - US