September 9th, 2008 in Coding Tutorials by Richard Carpenter
Simple CSS Menu
40 Votes, Rating: 4.75
Loading ...
Firstly lets create our simple navigation in photoshop, select the rectangular marquee tool and create your navigation, make it about 600 x 50 pixels you can create a fixed size rectangle by changing the style setting at the top of the screen.
Fill your rectangle with any color than add these layer styles to it.
Yout navigation should look like this.
Now using the text tool add your navigation text, of course we will be adding the text to our navigation in html, this is just so we no it looks ok.
Now on our navigation id like to add some sort of a rollover, so select the rectangular marquee tool and create a box under your text layer, im using the color #e1e1e1.
The rollover aint finished yet :) now add to triangle top and bottom of the navigation.
Thats it for the designing part, we will now code it in css to use for a website. You might want to save your PSD file at this point incase you need to use it again. After you have saved it hide your text layer, then goto “layer > merge visable”. Believe it or not we only need two images to create this navigation in css. Zoom in pretty close with the magnify tool then select the rectangular marquee tool and create a selection like this.
The dimensions for the selection are 1pixel wide and 50 pixel’s in height and the selection starts right at the top of the stroke and ends just as your drop shadow disapears. Create a new folder on your desktop called naviagtion, open your folder then create another new folder called “images”. Head back over to photoshop then press “ctrl + c” to copy your selection, then goto “file > new” press ok, your dimentions of selection should automatically be entered into the new dialog box. Just goto “edit > paste”. Now goto “file > save for web & devices” or if your using cs2 it will say “save for the web”. Navigate over to your folder and save it as “silver_nav_background.gif”.
Thats our first image, now lets create our 2nd image create a new document 200×50 pixels. Re-create your mouse over look.
Once you have re-created it goto “file > save for web & devices” or if your using cs2 it will say “save for the web”. Navigate over to your folder and save it as “silver_nav_mouseover.gif”.
Thats all we need to do in photoshop, head over to your naviagtion folder, backout of the images folder then open up notepad. Once it opens just goto “file > save as” and save it as style.css (DONT FORGET TO ADD THE .CSS part in the filename). Open up dreamweaver and create a new HTML document, also got “file > open” and open the style to css text file your prevously created. You should have to two pages open now in dreamweaver, you can switch between the two pages by clicking these two buttons.
Click your HTML page and click “code” to see the code view of that document. You’l be presented with this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
We can leave all that just change the title where it says “Untitled Document”, Change to what ever you want il call mine navigation tutorial. Inbetween the “BODY” tags mark out your naviagtion to do this we add our starting DIV tags and create our text and links.
<div class="silver"> <div id="nav"> <ul> <li><a href="http://www.hv-designs.co.uk" title="Home" class="current">Home</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 2">Button 2</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 3">Button 3</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 4">Button 4</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 5">Button 5</a></li> </ul> </div> </div>
You will notice in the HTML code above in the 1st link there is a “class=current” this means when you change pages the rollover will stay active for that specific page. You will have to add the class to each link on there own pages. We have also got to add some css in the style sheet for it to work.
You webpage should look like this in dreamweaver at this stage.
Thats all we need for the naviagtion, we just need to add one more bit of code. Inbetween the “HEAD” tags add this little bit of code.
<link rel="stylesheet" href="style.css" type="text/css" />
This snippet of code attches our style sheet to the HTML document. You HTML document should now look like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Navigation Tutorial | HV-Designs.co.uk</title> </head> <body> <div class="silver"> <div id="nav"> <ul> <li><a href="http://www.hv-designs.co.uk" title="Home" class="current">Home</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 2">Button 2</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 3">Button 3</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 4">Button 4</a></li> <li><a href="http://www.hv-designs.co.uk" title="Button 5">Button 5</a></li> </ul> </div> </div> </body> </html>
Save your HTML file as index.html in your naviagtion folder on your desktop. Now open your CSS file and add this at the very top of your file.
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
This bit of css sets the margins around the page also known as the “BODY”, we want our navigation to go right to the end of our browser so it looks nice and neat, the only margin we need is the top margin which is set at 20pixels. Now add this underneath your body item.
/* ---------------------- silver nav ---------------------- */
.silver #nav{
position:relative;
display:block;
height:50px;
font-size:11px;
font-weight:normal;
background:transparent url(images/silver_nav_background.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}
The code above means.
position:relative = The position property places an element in a static, relative, absolute or fixed position.
display:block = The element will be displayed as a block-level element, with a line break before and after the element.
height:50px = Height of the navigation, this needs to be changed if your navigation images arn’t 50 pixels high.
font-size:11px = Sets the size of the text to 11pixels.
font-weight:normal = bold or not.
background:transparent url(images/silver_nav_background.gif) repeat-x top left = This part is IMPORTANT as it sets our navigation background image in our case the image we created within photoshop.
font-family:Arial,Verdana,Helvitica,sans-serif = Fonts to use.
text-transform:uppercase = Text is all in capitals.
Your navigation should now look like this.
Now add,
.silver #nav ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}
The code above means.
margin:0px = Margin around the unordered list.
padding:0 = Padding around the unordered list.
list-style-type:none = The listStyle property sets all list properties in one declaration.
width:auto = Wdith of the unordered list is set to auto so the its centered no matter what size the browser window is.
Now add,
.silver #nav ul li{
display:block;
float:left;
margin:0 1px 0 0;
}
.silver #nav ul li a{
display:block;
float:left;
color:#3A3A3A;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;
}
A breakdown of the above styles listed below.
display:block = The element will be displayed as a block-level element, with a line break before and after the element.
float:left = The float property sets where an image or a text will appear in another element.
color:#3A3A3A = The color of our text in a normal state.
And finally add,
.silver #nav ul li a:hover,.silver #nav ul li a.current{
color:#333333;
background:transparent url(images/silver_nav_mouseover.gif) no-repeat top center;
}
/* ---------------------- END silver nav ---------------------- */
This is where we set our mouseover image and activate the “current” class that i was talking about at the start of the tutorial. If you save your style sheet and open your HTML file you should have something like this *(CHECK LINK BELOW)*
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
41 Responses to “Simple CSS Menu”