Web Design :: Lessons :: Menus
Vertical Menus
You can create menus in Dreamweaver by creating an unordered list that has a line for each link. These links can be text links or image links.
NOTE: There is a <nav> tag in HTML5 that can be used to specify a navigation section. You should use the nav tag to enclose the list you use to create your menu.
- Open a page in your Lessons folder.
- Insert an unordered list with two or three links.
Creating a vertical menu using a list is easy since the list almost looks like a vertical menu already. All we have to do is remove the bullets and maybe add some more space between the list elements. A horizontal menu involves an extra step, which we will see after we create a vertical menu.
- Open the CSS Designer Tab if it is not open already.
- Create a new selector.
- Create a class selector called ".menu li".
We now need to add style to our new class to remove bullets and add some spacing.
- Change the list-style-type property to "none".
- Change the padding-top property to 10.
We now need to apply our new CSS rule to the list.
The <li> tag defines a list item.
The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
- Click on the list.
- Find the <ul> tag below the Document Window.
- Right-click on the <il> tag and choose Set Class.
- Select the class you made for the menu.
You should now have a menu similar to the one below. You can change the color and other style elements by editing the CSS rule, which we will be doing when we change the menu to a horizontal one. The padding sets the space between the list elements so you can increase or decrease it depending on your taste.
Horizontal Menus
The display property defines how a certain HTML element should be displayed.
Creating a horizontal menu involves just one extra step. We need to force our list items to appear on the same line as opposed to their default setting of appearing on top of each other.
- Find the name of your class in the CSS Design Tab.
- Change the display property to "inline".
Your menu should now look like the one below. There is nothing to stop you from using images instead of text in your menu. Creating the menu is the same process except you add images to the list elements instead of text.
