Home > Rekayasa Web > Tutorial JQuery Navigation

Tutorial JQuery Navigation

Some people had problems with fade in, fade out tutorial with the animation not stopping when you move your mouse over. This has been fixed in this version and is 100% working with no glitches. You can download the source files for this tutorial for FREE using the button above. Right lets get started, the first thing we need to do is draft out our navigation in an HTML document, nothing major just something nice and simple. Heres an image of what were going to be creating.

Open a new photoshop document about 600×200 pixels fill your background with the color #ebebeb. Create a rectangle 600×94 pixels at the top of your canvas. (when pressing the rectangular marquee tool click “fixed size” under the style tab) Using the colors #ececec and #ffffff add a linear gradient to your rectangle. Then add a 1 pixel stroke using the color #c9c9c9.

Underneath your 1 pixel stroke add a 1 pixel white line spanning the entire width of your canvas. Underneath your white line add another rectangle this time 62 pixels in height and 600 pixels wide. Fill your rectangle with a linear gradient using the colors #eeeeee & #f6f6f6.

Now manually add the grey stroke and another 1 pixel white line at the bottom of your 2nd rectangle. Your image should now look like this.

Flatten your image and make a selection about 2 pixels wide and the whole height of your canvas then goto “image > crop” save your file as bg.png in a folder on your desktop called images. Next create a new canvas 2 pixels wide and 62 pixels in height. Zoom in then using the color #f5f5f5 create a 1pixel line all the way down on the left. Do the same for the right but use the color #dadada. Then at the very top just create a 1 pixel white line going across. Also save this in your images folder and name the file divider.png

You should now be set to create your HTML file. Open up dreamweaver and start a new HTML document, save the document straight away as index.html on your desktop. Open up notepad and save a blank file as styles.css. Also save this on your desktop. Download the latest jquery library from the jquery website, save the file inside a folder called “js”. Open up the folder and rename the file to just “jquery.js”. In the code view of dreamweaver link your style sheet and jquery file.

<link href="/img_articles/17315/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/img_articles/17315/js/jquery.js"></script>

Begin laying out the foundations of our HTML file, the HTML file will consist of a content wrapping div or container, a simple header div with a heading tag inside and then our navigation.

<div id="content_wrap"><!–content wrap begins here–>

<div id="header">
<h1>JQuery Navigation Bar</h1>
</div>

<div id="navigation"><!–navigation starts here–>
<ul class="nav_links">
<li><a href="/img_articles/17315/#">Page #1</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #2</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #3</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #4</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #5</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #6</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #7</a></li>
<li class="withdiv"><a href="/img_articles/17315/#">Page #8</a></li>
</ul>
</div><!–navigation ends here–>

</div><!–content wrap ends here–>

Let me explain the navigation code above, its generally a normal navigation apart from the very first button which hasn’t got a class. The class “withdiv” basically means with divider. I’ve set a divider for each link, it places our little divider image to the left of the buttons. But we don’t want a divider at the start or end of the navigation. So every link with the class “withdiv” will have our little divider image added to it.

Right lets add our CSS styling to our divs etc… The first thing we need to style will be our body and container.

*{
padding:0;
margin:0;
}
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5f5f5f;
}
#content_wrap {
margin: auto;
width: 850px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}

Pretty much straight forward stuff, the content_wrap is our container, this will just center our little website. The next bit of code will be for our quick and easy header we just basically want a box with some text in it, this will also aid in positioning the navigation.

h1 {
color: #FF0000;
text-align: center;
margin-top: 25px;
}
#header {
float: left;
height: 94px;
width: 850px;
}

Notice the size of our header div, its the same height as our 1st rectangle in which we created in photoshop. Now for the navigation styles.

#navigation {
float: left;
height: 62px;
width: 850px;
}
.nav_links ul {
margin: 0px;
padding: 0px;
}
.nav_links li {
list-style:none;
display:block;
font-size: 14px;
float: left;
}
.nav_links a {
text-decoration: none;
color: #990000;
display: block;
height: 40px;
padding-top: 22px;
padding-right: 27px;
padding-left: 26px;
}
.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/hover.png);
background-repeat: no-repeat;
}
.withdiv {
background-image: url(images/divider.png);
background-repeat: no-repeat;
}

First up is our navigation container #navigation, notice again the height of our navigation container its the same height as our 2nd rectangle in which we created in photoshop. The rest is pretty much standard stuff. The class “nav_links a:hover” will be our hover effect, we’ll be creating an image for that in a moments. The other class is “.withdiv” remember when we wrote our navigation in our HTML document? All the links add this class added apart from the first one. If you look at dreamweaver in the “DESIGN VIEW” you should have something like this.

Now you may need to alter the padding left & right in the “.nav_links a” class if your navigation doesn’t fit in the whole 850pixels, this will be due to some words being longer than others. As you can see I’ve used the same sort of text on each button to make it easier. Now to make our hover button, to get the actual dimensions take a print screen of your design view in dreamweaver, paste it into photoshop and make a selection like this.

If you make a selection like the one above, notice its selected the black dotted lines, copy it to the clipboard then goto “file > new” then when the new dialog pops up the selections dimensions will automatically be put into the width and height. That’s how big you should make your hover button. If you’ve used slightly longer words than mine then make the selection around your biggest word and use those dimensions. Now create your simple hover button, save it as hover.png in your images folder. You can test your HTML document in your browser and the hover button will be present.

Now for the jquery part, open up a blank notepad document then save it as custom.js into your JS folder. Open up your custom.JS file in dreamweaver then paste in this code.

$(function() {
// OPACITY OF BUTTON SET TO 100%
$(".nav_links a").css("opacity","1.0");

// ON MOUSE OVER
$(".nav_links a").hover(function () {

// SET OPACITY TO 30%
$(this).stop().animate({
opacity: 0.3
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
});
});

The code is similar to the fade in fade out code, only this time there’s a few extra lines which stops the animation. In the first couple of lines you’ll notice it calls the class “.nav_links a” this is basically what your applying the fade effect too. You could change them to something else say an image and it will fade the image. There’s just one more thing to do before we test it out and that’s link our other .JS file, we should have two in there already, just add another line for the custom.js file.

<link href="/img_articles/17315/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/img_articles/17315/js/jquery.js"></script>
<script type="text/javascript" src="/img_articles/17315/js/custom.js"></script>

You can see this effect by clicking here.

DOWNLOAD JQUERY NAVIGATION BAR

webdesign.org

  1. May 8, 2011 at 2:32 am
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: