How to Make a CSS Tree Menu
A menu tree consists of several menu items for navigating a website. A CSS, or Cascading Style Sheets, menu is a menu formatted with CSS code. CSS is a web element formatting language. CSS menus consist of two parts, the HTML code for creating the menu tree and its labels, and the CSS code for formatting the menu entry boxes, borders, labels and mouse-over interactivity.
Other People Are Reading
Things You'll Need
- A word processor, text editor, Web design program such as Adobe Dreamweaver, or an HTML source code editor
Instructions
-
Create the CSS File
-
1
Start a new document in the program that you use for creating CSS and HTML documents.
-
2
Type the following code on the first line of the new document:
@charset "utf-8";
This code tells the browser this is a CSS file.
-
-
3
Press ENTER twice to place a blank line between the first line of code and the next line.
-
4
Press ENTER twice to place a blank line between the first line of code and the next line.
Type (or cut and paste) the following code:
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;This code formats the menu tree's menu boxes, menu box borders, menu labels, menu backgrounds, and it creates the mouse cursor interactivity. For example, when the user hovers their mouse cursor over a menu item, the box containing the item changes color, and the text changes from black to white. You can change the appearance and behavior of the menu tree by changing the values for the individual properties. To change the label text color, for instance, you would edit the following selector:
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}The text color is controlled by the "color" property. The current value, "#FFF," creates black text. To change the color to gray, change the value to "#666."
Unless you are familiar with CSS programming, getting the desired appearance and behavior will require experimentation.
-
5
Press ENTER twice to place a blank line between the last line of code and the next line.
-
6
Type the following code:
.sidebar1 {
float: left;
width: 20%;
background: #93A5C4;
padding-bottom: 10px;
} if youThis creates a sidebar container to hold your menu tree.
-
7
Save the file as "menu.css."
Create the HTML File
-
8
Start a new HTML file in the program that you use for creating CSS and HTML documents.
-
9
Type (or cut and paste) the following code on the first line of the new document:
<!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>This code tells the browser this is an HTML Web page and what standards to use to format the page.
-
10
Type the following code:
<body>
<div class="sidebar1">
This code starts the content portion of the Web page and creates the sidebar container to hold the menu.
-
11
Start a new line and type the following code:
<ul class="nav">
<li><a href="#">Label 1</a></li>
<li><a href="#">Label 2</a></li>
<li><a href="#">Label 3</a></li>
<li><a href="#">Label 4</a></li>
</ul>
</div>
</body>
</html>This code creates the menu, closes the sidebar container, and signifies the end of the Web page. You can create as many menu items as you want by creating a new list item, such as "<li><a href="#">Label 5</a></li>," for each one. To create working links, replace the pound signs (#) with the desired URLs. To change the menu labels, replace the current labels, i.e. "Label 1," "Label 2," etc., with the desired label text.
-
12
Name and save the file.
-
1
Tips & Warnings
When you upload this Web page to the Web server, don't forget to upload menu.css. Otherwise, your menu tree will not format properly.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
