skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Menu - L. 08

If you are creating a website with more than one page, you'll want your visitors to easily be able to navigate from one page to another. If it's a small site, you might have only one menu. If it's a large site, you might have a main menu and some various sub-menus. You might also have certain menus only show in certain sections of your site. Of course, if it's a very large business site, you'd might be wise to hire someone to create it so they can use more advanced methods of managing sites. :^)

We'll look at having a very simple menu and then view some examples of other types of menus.

Unordered List Menu - Vertical

For this exercise, we are going create a div for the menu. Since the future pages will be stored in the same working folder on our computer and will be uploaded to the same directory at whatever web hosting site we choose, we'll use relative links rather than full URL's in the links.

The links won't work until a page is created for that link. But, once you have your basic page like you want it, you can "save as" and give the new page a name you've used in your menu. You can do this for each page you want to create.

We're going to create a div with the id "menu" and then put an unordered list inside of it. Here's the code

<div id="menu">
<ul>
<li><a href="index.html">Home</a></ li>
<li><a href="products.html">Products</a& gt;</li>
<li><a href="services.html">Services</a& gt;</li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

If you wanted a vertical menu in the sidebar, you could put the code in your index.html file under

<div id="sidebar">

You could put it above or below the paragraph that is there. But, we are going to change this code to be a horizontal menu.

Unordered List Menu - Horizontal

Code for the index.html file

You can take the exact same code and make a horizontal menu and that is what we are going to do.
  1. Open your index.html file with your plain text editor
  2. Copy the code above
  3. Look for <div id="logo"><h1>Logo - Welcome to My Page!</h1></div> in the index.html file.
  4. Past the code underneath the logo code.

Code for the style.css file

Many times folks will add some text to the style.css file that isn't used by the browser, but is there so folks can more easily find the part of the css file they want to change. You can do this like so:

/* MENU */

To have the list display horizontally, we'll add

#menu li {display: inline;}

We will want to add a little more css for some other styles, too. For this exercise, we are using css from a free template "Bordered" found at Templated (formerly freecsstemplates.org)

I like to put the css sort of in the order that the divs appear on the page. So, we'll put our menu css just under the css for the logo. Here's what we will copy and paste into our style.css file:

/* MENU */

#menu {
width: 750px;
margin: .5em auto;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}

#menu li {
display: inline;
}

#menu a:link, a:visited {
padding: 0 0 0 2em;
text-decoration: none;
font-weight: bold;
color: #000066;
}

#menu a:hover {
font-weight: bold;
color: #660000;
}

Wow! That's a lot of code just for a menu! Yep, but go ahead and copy and paste it into the style.css file. Then use your browser to open the index.html and look at the changes.

What does the CSS code mean?

We'll take the code one part at a time to see what it does.

#menu {
width: 750px;
margin: .5em auto;
}

width: 750px; - sets the width of the menu

margin: .5em auto; - the ".5em" sets the margin for the top and bottom of the menu. "auto" sets the margin for the left and right sides. Using auto means the menu will be centered within the "wrapper" div.

#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}

#menu ul - This is specifically setting the style for the unordered list that is in the menu div.

margin: 0; padding: 0; - This will override any margins and paddings settings that are default settings in different browsers.

list-style: none; - unordered lists usually have a circle or square or some other type of marker in front of the text. This code tells the browser not to show any marker.

text-align: right; - The menu will align from the right.

#menu li {
display: inline;
}

#menu li - This is setting the style of the lines of the ul in the menu div

display: inline; - This is the magic "horizontal" code for the menu. The lines will be in a line rather than one below the other.

#menu a:link, a:visited {
padding: 0 0 0 2em;
text-decoration: none;
font-weight: bold;
color: #000066;
}

#menu a:hover {
font-weight: bold;
color: #660000;
}

These two parts style the way the links in the menu appear:

First Part:

#menu a:link, a:visited - a:link, will affect how the link first appears and a:visited will affect how the link appears after it is clicked. Here, both will look the same, but it is actually better to stye each one with a different color to help visitors know where they've been.

padding: 0 0 0 2em; - The first three 0's means there is no padding on the top, right or bottom of the links. The 2em adds some padding to the left of each link.

text-decoration: none; - This removes the default underscore that usually appears under a link.

font-weight: bold; - This makes the text bold.

color: #000066; - This sets the color.

Second part:

#menu a:hover  - a:hover will affect how the link looks when the mouse hovers over it. We have code so that the link will change color on hover.

font-weight: bold; - This makes the text bold

color: #660000; - This sets the color.

Take some time if you want and play around with changing colors or some of the other code and view what the changes do to your index.html page. Be sure to save the changes you make to the style.css file and refresh/reload your browser page each time.

Code in the style.css file so far

body {background: #ffffdd url(images/weba01.jpg); color: #660000; 
font-family: Verdana, Arial, Helvetica, sans-serif;}

h1, h2, h3, h4 {font-family: "Times New Roman", Times, serif;}

#wrapper {margin: 0 auto; width: 800px;
background: #ffffee url(images/weba02.jpg);}

#logo{}

/* MENU */

#menu {
width: 750px;
margin: .5em auto;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}

#menu li {
display: inline;
}

#menu a:link, a:visited {
padding: 0 0 0 2em;
text-decoration: none;
font-weight: bold;
color: #000066;
}

#menu a:hover {
font-weight: bold;
color: #660000;
}

#main{width: 550px; float: right; background-color: #ffffff;
margin: 0 10px; padding: 5px;}
#sidebar{width: 200px; float: left; background-color:
#ffffee; margin-left: 10px; padding: 5px;}



#footer{clear: both; text-align: center;}

More Information

w3schools has some good information about Styling Links. There is even a "Try it yourself" section where you can play making changes and seeing the results.

What Now?

You could take what you've learned and create a simple website.

However, you might prefer to work through the exercises the "Learning how to use an Html Editor" section of the Basics page. An editor can make adding/changing content much easier.

You might also want to work through the group of exercises that are about "Learning how to use a Free Css Template" section of the Basics page. There are many sites that offer free templates and only require a link back to their site in the footer of the page. You could download a free template and then tweak the CSS to fit your style.

Whatever you choose to do, have fun doing it!

Return to Basic Skills and Practice page or Go on to Building a Website

Website "A" List of Lessons

Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08