How to Create a Navigation Menu for Dummies

This tutorial is intended for those who want to create a simple navigational menu and don't want to learn JAVASCRIPT or any other scripting languages to do so.

There are a lot of beginner Web Designers, and beginner users who want to make a web-site in a short amount of time and once they determined the design, look for tutorials that use complicated javascript to build navigation menus.

THIS TUTORIAL WILL SOLVE THEIR MISERY. In 8 easy steps I will show you how to create a simple Navigation MENU using HTML and Internal CSS with no DIVs. This tutorial gives you an option of making any custom button background and using it dynamically.

My next tutorial fill go a step further to create a little more complicated horizontal menu. It will have drop downs and highlights when you hover over the link! All right, are you ready for the magic?

OK so lets get to it.

STEP 1: SET UP THE WORKING ENVIRONMENT

Open pretty much any text editor (NOTEPAD, Dreamweaver, Ultra Edit, front page, Visual Studio)

STEP 2: CREATE a simple HTML DOCUMENT

http://www.lordfury.net/associatedcontent/CssDummies/step2.jpg

This step basically creates your html, head, title and body tags.

STEP 3: NOW you want to create the menu which is nothing else but a bulleted(unordered) list

http://www.lordfury.net/associatedcontent/CssDummies/step3.jpg

This creates the list of the links you want(I used some random websites)

With me so far? Good lets keep going

STEP 4: STYLING YOUR SIMPLE UNORDERED LIST TO LOOK LIKE A NAVIGATION MENU PART 1

This is where we style the unordered list so first we style the outside container (ul tag)

Place this code inside your head tag after the title tag:

< style type="text/css" >

ul#NavigationMenu { */ this notation says that styling would be applied to ul tag with id of "NavigationMenu"*/

clear: both; - /*this is for the ie, so it doesn't drop the next tab down*/

float: left; - /*this left aligns the block of content*/

list-style: none; /*this removes the bullets*/

margin: 0px 10px 0 0px; /*distance between navigational tabs would be 10 px*/

border-bottom:1px solid #333333; /*creates a line at the bottom, remove to create tab effect*/

width:400px;/*how long the bottom line is*/

}

OK so this is how your navigational menu should look like now:

http://www.lordfury.net/associatedcontent/CssDummies/step4.jpg

I know it doesn't look like much yet, but don't be sad, we haven't used the background picture. We also didn't make the list appear in line. Not to worry take a look at the next step!!!!!

STEP 5: STYLING YOUR SIMPLE UNORDERED LIST TO LOOK LIKE A NAVIGATION MENU PART 2

Now we style the individual list items to flip the menu and make it horizontal

ul#NavigationMenu li {

display: inline; /* this tells the browser to display your links in one single line

list-style: none; /* this prevents the list to be rendered like a list*/

}

Now your navigational menu will look like the following!

http://www.lordfury.net/associatedcontent/CssDummies/step5.jpg

As you can see it is starting to look better. Now the menu is horisontal and is equally spaced

STEP 6: STYLING YOUR SIMPLE UNORDERED LIST TO LOOK LIKE A NAVIGATION MENU PART 2

This is where the magic happens. This styles each individual link, adds a background, creates distances between the navigational buttons, creates a border, align the text all of that fun stuff.

The first line means /* Apply the style to the hyperlink (a) within the list tag within the (ul) tag with "NavigationMenu"

ul#NavigationMenu li a {

margin-right:10px; /*make the distance on the right of each button 10px*/

color: #FFFFFF; /*White color of the text for your buttons*/

text-decoration: none; /*gets rid of underline that html browser puts under links*/

vertical-align: middle; /* put the text in the middle of the defined button*/

padding: 7 10px; /* the distance between the border on top and left for visual appeal */

background-color:#058b18; /*Any color you like can be put here or even image.*/

border:1px solid Black; /*sets the border to black*/

border-bottom:none; /*since we already did the border on the bottom we don't need another*/

float:left; /* put the content as far left as we can*/

display: block; */this tell the browser to render each link as a block of content*/

}

You are complete.Your navigational menu should now look like this:

http://www.lordfury.net/associatedcontent/CssDummies/step6.jpg

STEP 7: (Optional) Make Custom Names + DEMO

This step is for complete newbs who copy everything word for word, plus it gives you a working copy of what you have accomplished . All this step shows is the name change on the buttons that are meaningful and not just LINK 1 LINK 2 LINK 3 LINK 4 and here I also provide the working copy of what your final result of this tutorial should be.

the complete code with changed names can be viewed here:

http://www.lordfury.net/associatedcontent/CssDummies/step7.jpg

The working DEMO can be found here:

http://www.lordfury.net/associatedcontent/CssDummies/test.html

Those interested in putting a custom background image can comment on this tutorial or send me an email and I will respond

STEP 8: GRAB A BEER JUICE OR SODA and celebrate.

I hope this tutorial will help someone!

As always questions comments concerns etc are encouraged.

Help and part of source for this tutorial:

http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/