How to Build a Website With Submenu Software
Building a web menu is easy and will require minimal programming expertise. This is possible because of the efforts of people who have shared their solutions in articles and free software packages. There are many options available, usually relying on standard text-based web HTML (hypertext markup language), CSS (cascading style sheets), markup and styling.
Other People Are Reading
Instructions
-
Build Your Menus and Submenus
-
1
Create an HTML page for your content. You do this by creating a simple text page with a .html extension, providing the basic structure for a document with HTML markup:
<html>
<head>
</head>
<body>
<body>
<html>
-
2
Write an outline for your website content. Start by listing the main sections that will appear at the first level of your site's navigation menu. Then for each of the items in your main list, create a submenu with the main topics that will appear beneath it. You can continue this process for as many levels as you like.
-
-
3
Create a list item for each term that appears in your outline. You do this by putting HTML list item tags (<li>) around the words that the user can select. For example, "<li>About Us</li>" creates a menu item.
-
4
Add your main menu to the body of your html document, using an unordered list (<ul>) with an id attribute that indicates that the enclosed content is to be presented as a menu.
<html>
<head>
</head>
<body>
<ul id="nav">
</ul>
<body>
<html>
-
5
Place the list items for your main menu between its ul tags:
<ul id="nav">
<li>Home</li>
<li>Articles</li>
<li>Blog</li>
<li>Photos</li>
<li>About Us</li>
</ul>
-
6
Create lists for each submenu as HTML unordered lists (<ul>) and place the appropriate list items within each one. For example, the sub-menu for a typical "About Us" section is:
<ul>
<li>Our People</li>
<li>Our History</li>
<li>Contact Us</li>
</ul>
-
7
Add the links to your menu system by placing HTML anchor tags (<a>) around each of the words within the list item tags. You specify "#" (the current page) as the URL to visit when the user clicks. For example, the markup for your "About Us" item becomes: "<li><a href="#">About Us</a></li>." The link to the current page will produce no visible action without more coding effort.
-
8
Create the menu and submenu relationships by placing the submenu lists inside of the anchor tags for the appropriate parent terms. This specifies the submenu choices to display when the link is clicked. For example, the following specifies the pages that provide information "About Us:"
<li><a href="#">About Us
<ul>
<li><a href="#">Our People</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</a></li>
Style the Drop-Down Menu
-
9
Create a cascading style sheet (CSS) page to specify the appearance of your menu. You do this by creating a simple text page with a ".css" extension, for example "menu.css". Include the style sheet in your HTML document by inserting a link tag within the head of the document:
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
-
10
Specify the styles for the main menu (#nav) and all submenus (ul) enclosed within it. The following settings remove default padding, margins, and styling from the list items used within the menu. This creates a clean slate for applying your chosen menu style.
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
-
11
Specify the styles for all hyperlinks (a) enclosed within the menu (#nav).
The following code instructs the browser to display the link as a block in a specified width.
In this case, the width is stated in "em" units which specifies units relative to the current default font size (1em). The setting of 10em is ten times the size of the default font.
#nav a {
display: block;
width: 10em;
}
-
12
Specify the styles for all menu and submenu items enclosed within the menu. The following code establishes the width of the block containing the menu link and instructs the browser to display the menu as far left as possible until it bumps into previously displayed content boundaries.
#nav li {
float: left;
width: 10em;
}
-
13
Specify the styles specific to submenus (ul) of the main menu (#nav). The following code is what hides the submenus until the user hovers over its parent term. The upper left of the visible area of an HTML element has coordinates "0,0." Using a large negative coordinate for the left edge of the submenus effectively hides them when not in use.
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
-
14
Re-set the associated submenu to the default position when the user hovers over a menu item. This will cause the submenu to "magically" reappear in a visible location and disappear when the user moves on.
#nav li:hover ul {
left: auto;
}
Refine Your Menu
-
15
Add additional styling to support the logic of nested submenus. You need to create rules that specifically reflect each depth of HTML element nesting. The following code handles three levels of nesting. Each level gets progressively more complex:
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
-
16
Select a menu solution that can be easily adapted to your application with minimal modification. A solution will include CSS style sheets that address aesthetic qualities, such as color and font appearance. More importantly, it should include Javascript code that implements sophisticated behaviors and adjusts for specific browser feature limitations and bugs.
-
17
Follow the instructions for the package you have selected for specifying URLs for the lowest level menu items. A Javascript-based solution requires hooking handler functions to your anchors. If you are not using Javascript, you need to replace the # in your anchor href attributes with the URL of the destination page.
-
1
Tips & Warnings
Animated menus that slide open are an example of effects that can be achieved with a Javascript package.
Specifying dimensions using constant pixel sizes (px) -- instead of em units -- is likely to degrade menu appearance and behavior for users who have set their browsers to display larger fonts.
References
Resources
- Photo Credit website layout image by 6922Designer from Fotolia.com
