This page contains a few alternative techniques for building a basic navigation menu. Earlier I mentioned choices for optionally applying background color to the container DIV, UL, or A tags. I will demonstrate one possibility here. Then I will introduce an option for producing non-wrapping horizontal menus. I will finish this page by covering the necessary CSS alterations for floating a horizontal menu to the right.
Vertical Menu Background Color Alternatives
When we built the vertical navigation menu, we applied the orange background color to the A tags. Presenting the tutorial in this manner made going through the process clearer. However, you could just as easily apply background color to the container DIV instead, or to both the DIV and the A tags!
Below I demonstrate some styling that might be used to apply background colors to both elements. The div#sidebar a rule remains the same as in the vertical menu tutorial where we styled it with the orange background color. Here I add padding and background color to the sidebar DIV rule for a different look.
div#sidebar {
position: absolute;
top: 46px;
left: 36px;
width: 6em;
border-left: 1px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
border-bottom: 2px solid black;
padding: .25em;
color: #000;
background-color: #999;
}
The results should look similar to this:
Non-Wrapping Horizontal Menu
This technique is easiest to implement when the horizontal navigation menu is floated left. By designating a specific width for the UL in ems you can prevent the horizontal navigation menu from wrapping when the browser window is reduced in size or a user increases the font size in their browser. Instead of wrapping, a horizontal scrollbar is produced. To implement this technique make the following change to the #topnav ul rule:
div#topnav ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 100%;
width: 40em;
}
The example on the left shows how the navigation bar wraps when the UL width is set to 100% and the browser window is reduced in size. The example on the right shows how the navigation bar does not wrap when the UL is given a specific width. Instead a horizontal scrollbar is produced when the browser window is reduced in size.
When employing this non-wrapping menu option it works best to apply background-color to the container DIV rather than to the UL, and to additionally apply the same background color to the A links. This is the coding we employed in the horizontal navigation tutorial.
Determining how many ems are necessary for the width of the UL is a matter of trial and error. You want the UL to be wide enough to accommodate all the link buttons but not much wider. Because we are using ems for all our menu measurements, everything will resize in tandem should a user change their browser font size!
This non-wrapping horizontal menu technique works best when borders or padding are not applied to the container DIV; use background-color only. The width of the screen on page-load determines how wide the DIV is (100%). If the navigation menu becomes wider than the screen (user enlarges browser font), using the horizontal scrollbar in some browsers would reveal the end of the DIV width (the position of the right edge of the browser window before using the scrollbar) if borders or padding were present.
Float Horizontal Menu to the Right
Floating a horizontal menu to attach on the right is fairly straightforward but I will cover the steps to make it simpler.
Naturally all directives for float:left need to be changed to float:right. Change the float in the following selectors:
div#topnavdiv#topnav uldiv#topnav a
Change border-right to border-left in the div#topnav a rule.
The only other thing that may need to be done is to re-order the LI items in the HTML markup. When the list is floated to the right the first item is placed at the right edge of the window, the second item to the left of the first one, and so on. This is a logical way for the LI tags to stack against the right side of the window but it isn't necessarily the way we read (left to right) in western society. Adjust the order of your markup if necessary.
Without adjusting the markup, the right-floated horizontal menu would look like the example below. The "Home" button is now on the far right.
On the next few pages I will introduce you to three different techniques for using graphic images to enhance your CSS list-based menus. It is not required that you use these more advanced techniques in any of your remaining classwork but I do encourage you to try them out!