Simple CSS Menu

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.

[sourcecode language=’html’]




Untitled Document




[/sourcecode]

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.

[sourcecode language=’html’]

[/sourcecode]

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.

[sourcecode language=’css’] [/sourcecode]

This snippet of code attches our style sheet to the HTML document. You HTML document should now look like this.

[sourcecode language=’html’]




Navigation Tutorial | HV-Designs.co.uk



[/sourcecode]

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.

[sourcecode language=’css’]
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
[/sourcecode]

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.

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

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,

[sourcecode language=’css’]
.silver #nav ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}
[/sourcecode]

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,

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

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,

[sourcecode language=’css’]
.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 ———————- */
[/sourcecode]

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)*

VIEW FINISHED MENU.

27 thoughts on “Simple CSS Menu”

  1. Very nice! I was waiting for a CSS tutorial for so long. Maybe you could do more CSS tutorials in the future.
    Thanks!!!

  2. I love tuts like this.
    Admin you need to run automatic cron jobs, or add a script that will email the subscribers right when you post.
    This came about a day late. Maybe you have a lot of people and it might take some time.
    I hope that you don’t manually have to fun the script through a file.

  3. ^You should make your own subscriber, its not really hard:
    <?php
    if(isset($_POST[‘subscribe’]){
    $email=$_POST[’email’];
    $emailquery=mysql_query(“INSERT INTO subscribers (email) VALUES(‘$email’)”)or die(“error occurred, please try again later”);
    if(mysql_affected_rows($emailquery)){
    echo”Thank you for subscribing!“; } }
    ?>
    Then inside your wordpress file, open the file in which you use to post your news:
    You will see something in the html()
    then add to the php:

    Just a rough draft of what it might look like.

  4. which is probably why you should make your own website.
    No doubt your really good at photoshop and css, which i am very weak at.
    But you can’t do much with just html, you need php&mysql.

  5. Hey man, that is a nice simple bit of work.

    I have a question though.

    “display:block = The element will be displayed as a block-level element, with a line break before and after the element.”

    I thought display:block was used to remove this effect from inline objects not add it?

    Could you PM me with an update?

    cheers

  6. i checked W3schools when writing the tutorial.

    β€œdisplay:block = The element will be displayed as a block-level element, with a line break before and after the element.” is correct

  7. Excelent tutorial, i learned a lot, that is because i know nothing about css or html. But i have one question.
    How do you center (align) the menu on a web page?

    Thanks

  8. Hi, i have a problem with the navigational bar, i want to add an image directly below the navigational bar but there is always a row of white space in between the bar and my image . Do u think you can help ?

  9. Hi, great tutorial, but i got a question, when i added more link to the menu and when i decrease the size of my browser(to let say 60% width), the extra link just jutted out of the sliver back ground. How do i solve that ? T_T

Leave a Reply

Your email address will not be published. Required fields are marked *