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.
SEE PG 167-175 IN MASTERING CSS WITH DW CS3 FOR ADDITIONAL INFO...
IMPORTANT NOTE: Use only ONE of the three options below to carve out space for the horizontal menu and then process with Converting the Vertical Menu to an 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 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> element.
- Delete the padding property from #sidebar1 rule.
- Why? So that the top and bottom padding can be removed.
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.
Option 3: Simply used the <ul> tag as a top-level container
- Since the <ul> tag is a top-level container, simply cut and paste INSIDE the #header in Code View.
NOTE: 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 id="header">
// <img> or <h1> tag goes here....
<ul id="nav">
<li>text1</li>
<li>text2</li>
// additional <li> tags goes here...
</ul>
<div>
By inserting the bullet list INSIDE of the #header container, and using the <ul> as a top-level container you don't need to include an extraneous div container with and ID or Class to house it. Instead you can use a contextual selector to target <ul>, <li> or <a> tags inside the #header div without worrying about affecting similar tag outside the #header container.
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 element is floated, it is taken out of the normal document flow and as a result its parent container (in this case, the <ul> elementt) can not "see" the <li> tags and hence can not contain them. However, the <li> tags can interact with one another and hence all of them float left of one another.
- Add a float:left; property to the main ul rule.
- Why? To resolve the problem on the <ul> element not containing the <li> element, we can add a float:left; property to the main #nav rule. Remember, a floated elemnet will contain other floated elements.
- Why? To resolve the problem on the <ul> element not containing the <li> element, we can add a float:left; property to the main #nav rule. Remember, a floated elemnet will contain other floated elements.
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 contextual 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