How to Create a Left Vertical Drop-Down Menu in HTML
HTML unordered lists -- often used to display simple lists -- also appear on Web pages around the world in the form of menus. A menu may appear at the top of the page horizontally or vertically along the sides of the page. You often find navigational menus on the left. By adding a little JavaScript functionality to a vertical menu, you can create a drop down effect. Site visitors can then click a link to open and close the menu whenever they like.
Other People Are Reading
Instructions
-
-
1
Launch your word processor or an HTML editing program.
-
2
Open an HTML document and locate its body section. Paste the code shown below into that section:
<a href="javascript:manageMenu('menuContainer')">Toggle Menu</a>
<div id="menuContainer">
<ul id="menu1">
<li><a href="Add Link Here">Products</a></li>
<li><a href="Add Link Here">Downloads</a></li>
<li><a href="Add Link Here">Help</a></li>
</ul></div>
The first statement creates a link. This link executes a JavaScript function that toggles the left vertical menu on and off. Note that the statement passes the ID of the menu's div container. The next statement creates the div container that holds the menu. The div's ID value is "menuContainer." The final statements create the unordered list. Each list item, li, in the list contains an anchor tag that creates a link. Replace "Add Link Here" with the URLs of pages that exist on your website or somewhere else on the Web.
-
-
3
Add the CSS code shown below to the document's style section:
#menuContainer
{
display:none;
}ul#menu
{
width:100px; margin-left: 10px; border-style:dotted; border-width:2px; border-color:Maroon;
}#menu1 li
{
display:block; list-style-type: none; color:Blue;
}#menu1 a {
text-decoration: none;
}#menu1 a:hover {
text-decoration: underline; background-color:Yellow;
}The first CSS selector sets the container's display property to "none." This makes the menu invisible when the Web page loads. The ul#menu selector defines the way you want the menu to look. In this example, the attributes set the menu's margin, border style and border color to the value shown. The #menu1 li selector sets the display attribute of the list items to "block." Doing this makes them appear vertically down the page. If you did not include this value, the menu items would appear horizontally across the page. The list-style-type attribute' value is "none." This removes the bullets that normally appear at the beginning of list items. The color:Blue attribute sets the color of the menu items to blue. Change this color to anything you like. The next CSS selector, #menu1 a, removes the underlines that appear under links by default. The final selector makes the underline appear and changes an item's background color to yellow when you move your mouse over the item.
-
4
Paste the following JavaScript function below the code you added in the previous step::
function manageMenu(menuID) {
var menuObject = document.getElementById(menuID);if (menuObject.style.display == "none" || menuObject.style.display == "")
menuObject.style.display = "block";else menuObject.style.display = "none";
}This function retrieves the ID of the container passed to the function when you click the link “Toggle Menu” link. The code then sets the container’s display style to “block” if it is “none” and “none” if it is “block.” This cause the menu to drop down and collapse whenever you click the link.
-
5
Save the HTML document and open it in your browser. Click the "View Menu Items" link. The code runs and displays the left drop down menu.
-
1
Tips & Warnings
When building your own left vertical drop-down menus, replace the links shown in this example with your own URLs, which point to locations on the Web that are relevant to you. You can also try out different list styles by using different values for color, padding, margins, font border and other attributes in the CSS style section.
