Instruction: In this tutorial, we will use the finished version of the Vertical Menu tutorial file which we renamed as horizontalMenuStartPage.html. It is helpful to test in browser after each step to "see" the changes.
Carving out space for the horizontal menu
Option 1: Using the EXISTING sidebar1 div
- Delete the float property from #sidebar1 rule.
- Why? So that it can be placed back into the normal flow of the document and the mainContent container can rest below it.
- Delete the margin property from #mainContent rule.
- Why? So that it can move to the left and under the sidebar container.
- Delete the width property from #sidebar1 rule. Ensure that the width property of the #nav is set to 100%.
- Why? So that it can expand across the page. Remember, block-level elements expands to 100% of its parent container—in this case, the <body> tag.
- Delete the padding property from #sidebar1 rule.
- Why? So that the top and bottom padding can be removed.
Carving out space for the horizontal menu
Option 2: Creating a NEW div called #nav
- Select the header container and click the Insert Div button in the Layout tab. Select the After option from the Insert combo box and <div id="header"> from the other combo box. Assign an ID of nav and click OK. (Don't worry if Dreamweaver say there are more than one ID, we'll fix it later.)
- Select the <ul> tags with the tag chooser and cut the code out.
- Select the default text in the Code view and paste the content of the clipboard in its place.
- Delete the id="nav" attribute from the sidebar container.
Carving out space for the horizontal menu
Option 3: Simply used the <ul> tag as a top-level container
CAUTION: This option should only be used if there is only ONE <ul> tag on the page. Otherwise, all instances of the <ul> tag will be targeted by the same set of rules.
Since the <ul> tag is a top-level container, you could simply cut and paste it BETWEEN the #header and #sidebar1 div containers in Code view. This avoid having to create an extra div wrapper as done above and not having to delete the attribute from the div. Partial code shown below:
</div> // end of header div
<ul id="nav">
<li>text1</li>
<li>text2</li>
.....
</ul>
<div id="sidebar1" /> // Start of sidebar1 div
Converting the vertical menu to a horizontal menu
- Delete the display:block property from the #nav a rule.
- Why? So that it can return to its default inline position
- Create a new rule (#nav li {float:left;}).
- Why? So that all line items can float left and hence stack side-by-side. However, there is a problem. Remember when an elemnt is floated, it is taken out of the normal document flow and as a result its parent container (in this case, the ul tag) collapse on top of itself.
- Add a float:left; property to the main ul rule.
- Why? To resolve the collapsing problem, add a float:left; property to the main #nav rule.
- Why? To resolve the collapsing problem, add a float:left; property to the main #nav rule.
NOTE: You could have created a new rule #nav li {display:inline;} instead of the two float properties; however, it does not render correctly on all browsers.
Styling the horizontal menu
- Move the border property from the #nav a rule to the #nav li rule and change the border from bottom to right.
- Why? So that the borders can be appear on the right sides instead of bottom.
- Delete the line-height property in the #nav a rule or edit it (i.e., 1.2)
- Why? So that the menu height can be 100% of its parent container—in this case, the <li> tags.
- Further style the menu to your liking (i.e., change color, etc.)
- Why? So that it can match the overall look-and-feel of your web site.
BONUS 1: If you plan to use both a horizontal and vertical menu on a page, wrap each list block with a div container that has a unique ID style for both (i.e., #verticalMenu and #horizontalMenu). Then, you can use descendent selectors (i.e., #verticalMenu ul and #horizontalMenu ul) to target them independently.
VIEW EXAMPLE
BONUS 2: Instead of using the color property for the various states, you could use the background property in its place and use images instead.
BONUS 3: You could have used just a list of links—<a> tags to create a real simple horizontal or vertical menu. VIEW EXAMPLE