JQuery Navigation

Hello there people, welcome to tutorial 177 on hv-designs today il show you how to incorporate the fade in, fade out effect into a working block style 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.

Flattern 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 libary 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.

[sourcecode language=’html’]
[/sourcecode]

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.

[sourcecode language=’html’]


[/sourcecode]

Let me explain the navigation code above, its generally a normal navigation apart from the very first button which hasnt got a class. The class “withdiv” basically means with divider. Ive 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.

[sourcecode language=’css’]
*{
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;
}
[/sourcecode]

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 postioning the navigation.

[sourcecode language=’css’]
h1 {
color: #FF0000;
text-align: center;
margin-top: 25px;
}

#header {
float: left;
height: 94px;
width: 850px;
}
[/sourcecode]

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.

[sourcecode language=’css’]
#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;
}
[/sourcecode]

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 doesnt fit in the whole 850pixels, this will be due to some words being longer than others. As you can see ive 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. Thats 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.

[sourcecode language=’javascript’]
$(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”);
});
});
[/sourcecode]

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

[sourcecode language=’html’]

[/sourcecode]

You can see my effect by clicking the button below.

Site Downtime

For the people trying to view the website in the past 8 hours or so im sorry you couldnt access it. You were proberbly greated with a suspended host page 🙁 some how the hosting providers servers got overloaded, there still investigating the problem unfortunelty, ive also had to DISABLE all wordpress plugins so if the layout bugga’s up thats why.

We do apoligize for this slight mis-hap and hope to get it resolved as soon as.

Also on the cards…. at the end of march hv-designs is moving servers, were moving to a VPS server as this will hopefully run abit smoother. So there might be alot of downtime from NOW till end of march.

We’l try and make it as smooth as possilable.

Many Thanks

Portfolio Layout #10: Learn To Code It

Hello, welcome to the coding tutorial of the portfolio #10 layout. In this tutorial il explain the steps to take in slicing and coding the layout. Before attempting this tutorial i highly suggest you create the layout before hand and have it ready, you can also download the CSS layout for FREEEE using the download button above, there is no licence with the download so your free to manipulate it as you wish. (just dont rip me off and decide to sell it). The whole of the css document is well documented with every style entry comment coded on what it does.

Right lets get started, the first thing you need to do is create your template directory, just make a folder on your desktop called “portfolio” within this folder you need another folder called “images”, a blank HTML document and a blank CSS document. Once you have those in place your ready to rock and roll.

Now when i code from a PSD file i generally code from the top and work my way down and slice the images as needed. When saving your images save them as a PNG file within the images folder, and try to use a name which corrosponds with the image. Right lets take alook at our PSD and work out what we need.

Right looking at the image above we need a container div which will hold all our content in, a header wrapping div which will hold our logo and navigation, inside the header wrapper div we need a logo div and a navigation div. Then we need to set up a class for our content. Why use a CLASS and not DIV i here you say??? well a class can be repeated as many times as needed, a DIV shouldnt, a DIV should be a unique element of the site. So our HTML structure should look like this.

[sourcecode language=’html’]


[/sourcecode]

Add the following code to your HTML document, once your done with the structure of the document add the code below inbetween your HEAD tags. Without the code below your CSS style sheet will be useless.

[sourcecode language=’html’] [/sourcecode]

Open up your styles.css document in dreamweaver ready for your styles. The first thing we need to style is the main body of our document, we want to set all margins to 0, set our default font, size and color. We also need to set our background color and image. Head over to photoshop, flattern your layers into one layer (DONT SAVE IT THOUGH), select the rectangular marquee tool and make a selection like this.

The selection should cover your topbar and background up to the footer. Copy and paste the selection to a new document and save it as “bg.png” in your images folder. Now in the step above i mentioned we need to set our background color, well the background color we need to choose is the color in which ends at the bottom of the selection. You can get the color code by using the eye dropper tool in photoshop. How it works is the background image will be displayed up until the point it ends, then the background color will take over. Right now for the CSS.

[sourcecode language=’css’]
/*MAIN DOCUMENT STYLES*/

*{
padding:0;
margin:0;
}

body {
font-family: Arial, Helvetica, sans-serif; /*fonts for the main document*/
font-size: 12px; /*font size for the main document*/
color: #484941; /*font color for the main document*/
background-color: #cccccc; /*background color*/
background-image: url(images/bg.png); /*our background image*/
background-repeat: repeat-x; /*background image repeated horizontally*/
}
[/sourcecode]

Refer to the commented code for each element. The next DIV we need to style will be our container DIV and head wrap DIV. The code for these DIV’S looks like this.

[sourcecode language=’css’]
/*CONTAINER STYLES*/

#container {
width: 800px; /*the bottom margin is the negative value of the footer’s height*/
margin: auto; /*centers our content*/
}

#head_wrap {
height: 90px; /*head wrap will be 90 px high*/
width: 800px; /*head wrap will be 800 px wide*/
margin-bottom: 20px; /*margin at the bottom will be 20px*/
}
[/sourcecode]

Right thats our containers sorted, now we need to add our logo or website text in our case. You can do this two ways, the 1st one is save the website text and box as an image BUT doing this means you’l have to edit the image each time you want to update your text inside the box. The 2nd way is to just slice the box into an image and add the text using CSS. Now the choice is yours on the route you take. Im going with the 2nd one as it offers the most flexability and is quickest. The way we go about it is first you need to hide all your layers on your photoshop document except the rounded see through box.

Select the rectangular marquee tool and draw a box around your rounded box, make sure you include the drop shadow, its best if you zoom in and just follow the last pixel on the drop shadow. Once you’ve made the selection just goto “image > crop” (DONT SAVE PSD FILE) save the image as “logo.png”. Now for the code.

[sourcecode language=’css’]
/*LOGO STYLES*/

#logo {
float: left; /*floats the logo to the left of our container*/
height: 90px; /*height of our logo image*/
width: 261px; /*width of our logo image*/
background-image: url(images/logo.png); /*our logo image set as a background*/
background-repeat: no-repeat; /*logo image wont repeat*/
}

#logo h1 {
text-transform: uppercase; /*transforms text into capital letters*/
font-size: 30px; /*font size*/
font-weight: bold; /*font weight*/
margin-top: 15px; /*margin above the text*/
margin-left: 40px; /*margin left side of the text*/
}

#logo p {
font-size: 12px; /*slogan font size*/
font-weight: bold; /*slogan bold*/
float: right; /*floats slogan to the right*/
margin-right: 50px; /*margin right side of the slogan*/
}
[/sourcecode]

Right you will notice height and width of the logo is the same specified in the CSS file this is important, your’s might be different though as depends on where you made the selection in the PSD cutting stage. Also the HEAD_WRAP DIV is also 90px high which also corrosponds with the logo. The head_wrap DIV is the box which will hold our logo box and navigation, there is no need for the head_wrap DIV to be any higher than our logo. We have also set a h1 tag within our logo DIV this will be the actual text of our website I.E yourname, the #logo P tag is our slogan underneath our website title. Add the following to your HTML file within the logo DIV.

[sourcecode language=’html’]


[/sourcecode]

If you view your HTML document you should see everything display similar to your PSD file. The background, logo box, website title and slogan.

Right the next part we need to code is our navigation, firstly lets draft the navigation bar in our HTML document. Put the following code in your navigation DIV.

[sourcecode language=’html’]


[/sourcecode]

You’l notice there are now additional tags we need to style “ul”, “li”, “a” and some sort of hover. All these tags will have a class of “nav_links”. The CSS looks like this.

[sourcecode language=’css’]
/*NAVIGATION STYLES*/

#navigation {
float: right; /*floats navigation to the right of the container*/
margin-top: 10px; /*places a top margin*/
}

.nav_links ul {
list-style:none; /*removes bullet points from a list*/
display: inline; /*displays links inline*/
}

.nav_links li {
list-style:none; /*removes bullet points from a list*/
display: inline; /*displays links inline*/
}

.nav_links a {
padding-left: 50px; /*each links will have 50px padding on the left*/
text-decoration: none; /*removes link underscore*/
text-transform: uppercase; /*all links will be in capitals*/
color: #8d8d8d; /*color of the link*/
font-weight: bold; /*makes links in bold*/
}

.nav_links a:hover {
color: #0099FF; /*color of the links on mouseover*/
}
[/sourcecode]

Thats it for the top half, save your work and test it out in your browser. Were now going to code and style our content box, dont forget the content box will be a CLASS not a DIV. Your going to need to slice your content box image, to do this you need to hide all your layers in your PSD file and leave in view the content box and the pattern, goto “edit > merge visable” (DONT SAVE PSD) draw out your selection using the rectangular marquee tool, either crop it or copy & paste to a new document then save as content_box.png

You can now add the styling to your content class, which looks like this.

[sourcecode language=’css’]
/*MAIN CONTENT STYLES*/

.content {
height: 271px; /*height of our content box*/
width: 706px; /*width of our content box*/
margin-right: 47px; /*margin right*/
margin-left: 47px; /*margin left*/
background-image: url(images/content_box.png); /*our content box image */
background-repeat: no-repeat; /*content image nor to repeat*/
margin-bottom: 20px; /*margin bottom of 20px*/
clear: both; /*clears the floats both left and right*/
}
[/sourcecode]

The height and width refer to the actual dimension of your content_box.png image. Yours might be different depending on where you made the selection. Once you’ve added the styles above you can view the HTML file and your content box should show up. The content inside the content box will each have there own classes and will be coded like this.

The HTML code for the image above looks like this.

[sourcecode language=’html’]


[/sourcecode]

The CSS styling for the class above looks like this.

[sourcecode language=’css’]
/*MAIN CONTENT STYLES*/

.content {
height: 271px; /*height of our content box*/
width: 706px; /*width of our content box*/
margin-right: 47px; /*margin right*/
margin-left: 47px; /*margin left*/
background-image: url(images/content_box.png); /*our content box image */
background-repeat: no-repeat; /*content image nor to repeat*/
margin-bottom: 20px; /*margin bottom of 20px*/
clear: both; /*clears the floats both left and right*/
}

.content_thumb {
height: 236px; /*height of our thumbnail*/
width: 391px; /*width of our thumbnail*/
float: left; /*floats our thumbnail to the left of our content box*/
margin-top: 17px; /*margin of 17px*/
margin-bottom: 17px; /*margin of 17px*/
margin-left: 17px; /*margin of 17px*/
}

.content_desc {
float: right; /*floats description text to the right*/
margin-top: 17px; /*description text has a top margin*/
margin-right: 15px; /*description text has a right margin*/
margin-left: 5px; /*description text has a left margin*/
line-height: 20px; /*description text has a line height of 20px to space out the paragraph*/
text-align: justify; /*description text is justifyed for nice clean columns*/
overflow: hidden; /*text that overflow the box will be hidden*/
height: 200px; /*fixed height of 200px*/
width: 278px; /*fixed width of 278px*/
}

.content_footer {
float: left; /*content footer text is floated left*/
width: 278px; /*has a fixed width of 278px*/
margin-right: 15px; /*has a right margin*/
margin-left: 5px; /*has a left margin*/
margin-top: 3px; /*has a top margin*/
}

.content_footer h1{
font-size: 12px; /*content footer text has a font size of 12px*/
}

.content_footer_col2 {
color: #0099FF /*content footer text color two (the blue text)*/
}
[/sourcecode]

The width and height in the content_thumb class will refer to the height and width of your thumbnail image, we create our thumbnail image by merging the thumbnail and thumbnail border layers as one, then simply copy and paste to a new document, save as what ever thumb.png. Right lets insert out content into our content box. We need to place our thumbnail in there, our header for the image, descriptive text and then our footer app and date.

[sourcecode language=’html’]


Example Thumbnail

MY WORDPRESS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.


[/sourcecode]

Check your HTML document in your browser you should have everything placed nicely. If you wanted to create another box for another project just copy and paste everything in the content class. so from DIV CLASS CONTENT to CLOSING DIV CLASS CONTENT then paste it underneath. You will just need to edit the thumbnail and content within the box to your new project, as easy as that.

Finally we need to add our footer styles.

[sourcecode language=’css’]
/*FOOTER STYLES*/

#footer {
background-image: url(images/footer_bg.png); /*footer background image*/
background-repeat: repeat-x; /*background image repeats horizontally*/
height: 32px; /*height of footer is 32px same as our image*/
clear: both; /*clear the floats left and right*/
margin-top: 50px; /*has a top margin of 50px*/
}

#footer p {
line-height: 30px; /*line height for footer text is 30px*/
float: right; /*floats text right of the screen*/
margin-right: 20px; /*pushes text 20px inwards from the right*/
}
[/sourcecode]

The footer background image will refer to the footer slice, you should no how to create the footer image by now 😉 similar to how we created our background image, just make a selection about 4 pixels wide. The image will then be repeated in CSS. You just need to add your P tag in your HTML document.

[sourcecode language=’html’]


[/sourcecode]

Thats it basically all done, dont forget you can download the FREE css template from the button at the top. Spread the word and i hope to see all your portfolios out and about 😉 you’ve got no excuse not to have one now.

ADDITIONAL STEPS

You can make your portfolio more intresting by adding abit of jquery interaction. These extra steps will get your images loading up in lightbox. The simple lightbox jquery plugin were using is by by Lokesh Dhakar, i havent really tested out alot of plugins but i no this one works and does the job. All the files needed for the lightbox are included in the download in a folder called lightbox. Just copy & paste the folder into portfolio directory. Open up your index.html file and reference the files like we do our CSS file.

[sourcecode language=’html’]
[/sourcecode]

The files are referenced find your thumbnail code and just add rel=”lightbox” within the A tag.

[sourcecode language=’html’]


Example Thumbnail

[/sourcecode]

Upload your files to your server and test it out 😉 Note lightbox only works with images and you need the full size image of the thumbnail in a folder somewhere on your server.

Many thanks for reading this tutorial, dont forget to subscribe VIA twitter and our RSS feeds. Till next time.