Course lectures : 1 of 1

Sliding Side Navigation with jQuery

Last updated: 24th February 2013

sliding navigation jqueryjquery navigationjquery sliding navigationjquery tutorial

Today we'll have a look at creating Sliding Side Navigation, which you can find an example in our demo.

First thing we need to do is to create the structure of our page, which you most probably already have, but we need to ensure that we have one stylesheet and three javascript files included - these are:

<link
    href="./css/core.css"
    rel="stylesheet"
    type="text/css"
    >

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js "></script>
<script src="./js/core.js"></script>

Above we have a link to the css file called core.css, stored within the css directory, which you will have to create. Then 3 links to the javascript files. First is the jQuery and the second jQuery easing plugin - both stored on the Content Delivery Network. The last one is the file you'll also have to create and put inside of the js folder within the root of your project.

The .css file should obviously be included in the head section of our page, while all javascript files before the closing body tag.

Now it's time for the layout with the navigation, which should look something like this:

<div id="wrapper">

    <ul id="navigationSlide">

        <li id="topAbout"><a href="/">About us</a></li>
        <li id="topPortfolio"><a href="/">Portfolio</a></li>
        <li id="topContact"><a href="/">Contact us</a></li>

    </ul>

    <div id="content">

        <h1>Sliding side navigation</h1>

        <p>Content goes here</p>

    </div>

</div>

Our navigation is inside of the div with the id wrapper. After our navigation we have the div with the id content, which is the container for whatever we want to display on the page. The wrapper is defining the boundaries of the page and where our navigation will be attached to on the left hand side.

Let's have a look at the styles - open previously created core.css file, stored within the css directory and put the following styling into it:

* {
    border: none;
    outline: none;
    font-size: 12px;
    font-weight: 100;
}
html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
span,
a,
table,
td,
th,
dl,
dd,
dt,
img,
input,
textarea,
select {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Verdana, Sans-serif;
    text-align: center;
    line-height: 21px;
    min-width: 1150px;
    font-size: 12px;
    background-color: #000;
    padding: 20px 0;
}
body,
a {
    color: #fff;
}
h1 {
    font-size: 36px;
    font-weight: bold;
    padding-bottom: 20px;
}
p {
    padding-bottom: 16px;
}
#wrapper {
    width: 700px;
    padding: 20px;
    margin: 0 auto;
    background: #222;
    min-height: 500px;
    text-align: left;
}
#navigationSlide {
    margin: 20px 0 0 -20px;
    padding: 0;
    position: fixed;
    list-style: none;
}
#navigationSlide li,
#navigationSlide li a {
    text-decoration: none;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
#navigationSlide li {
    width: 38px;
    overflow: hidden;
    position: absolute;
    right: 0;
}
#navigationSlide li a {
    line-height: 1em;
    height: 21px;
    padding: 11px 8px 0 40px;
    float: left;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}
#navigationSlide li#topAbout {
    top: 0;
    z-index: 1;
    background-color: #333;
    background-image: url(/images/about.png);
    background-repeat: no-repeat;
    background-position: 10px 7px;
}
#navigationSlide li#topPortfolio {
    top: 32px;
    z-index: 2;
    background-color: #444;
    background-image: url(/images/portfolio.png);
    background-repeat: no-repeat;
    background-position: 10px 8px;
}
#navigationSlide li#topContact {
    top: 64px;
    z-index: 3;
    background-color: #555;
    background-image: url(/images/contact.png);
    background-repeat: no-repeat;
    background-position: 10px 6px;
}

The images as well as all these files are included in the download (exercise files).

As you can see our navigation #navigationSlide has a fixed position and its margin is 20px from the top and -20px from the left. The negative 20px from the left is because of the 20px padding of the wrapper - this way we have it right on the edge of the wrapper and 20px from the top.

Open the /js/core.js file and create a new object called systemObject with the method called sideNav:

var systemObject = {

    slideNav : function() {

        "use strict";

        $('#navigationSlide').on('mouseenter mouseleave', 'li', function(event) {

            if (event.type == 'mouseenter') {

                var thisElementA = $(this).find('a'),
                    thisElementAWidth = thisElementA.outerWidth();

                $(this).stop(true).animate({ 'width' : thisElementAWidth + 'px' }, 400, 'easeOutBack');

            } else {

                $(this).stop(true).animate({ 'width' : '38px' }, 400, 'easeOutBack');
            }
        });
    }
};

The sideNav method is executed when the mouseeneter or mouseleave event is triggered on the li element of the #navigationSlide object.

If the event is mouseenter - in other words, if the mouse hovers over the button - we first identify the a tag and get its outerWidth, which basically means width including any padding. Once we have the actual width of the partially hidden button, we animate the width of the wrapping li tag to match it. We use the speed of 400 milliseconds and the easeOutBack easing.

If the event is mouseleave - else statement - then we use the same animation settings to reverse the width of the li tag to its original settings.

Now, the last thing we need to do is to call our sideNav method:

$(function() {

    "use strict";

    systemObject.slideNav();

});

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags.


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>