An Introduction to Cascading Style Sheets
CSS Menus and Navigation Bars
Nick Foxall
SM5312 week 11: CSS Menus & Navigation Bars
1
Navigation Bars
The main menu or main navigation bar is a core
element of any web site design.
Creating a clear and recognisable visual style for a
navigation bar is important for a user-friendly site
The two most common ways to display navigation
bars these days are:
Vertically
Horizontally
SM5312 week 11: CSS Menus & Navigation Bars
2
Navigation Bars
Vertical navbars can take the form of buttons or
small panels, or even plain text links with a simple
border.
Horizontal navbars can take the form of buttons or
tabs;
SM5312 week 11: CSS Menus & Navigation Bars
3
Navigation Bars in XHTML
Creating a Navigation Bar in HTML is easy:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
Just<li><a
a simple
unordered list, with each <li> element
href="#">Services</a></li>
enclosed in a hypertext link <a href> element.
<li><a href="#">About Us</a></li>
SM5312 week 11: CSS Menus & Navigation Bars
4
Navigation Bars in XHTML
However, its normal to “wrap” your navigation list in a div
element with a specific ID name:
<div id=“navbar”>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
This allows us to apply specific styling to the ul, li, and a
sub-elements
without affecting
the rest of the page styling.
<li><a href="#">About
Us</a></li>
SM5312 week 11: CSS Menus & Navigation Bars
<li><a href="#">Contact Us</a></li>
5
Navigation Bars in CSS: images
With the basic XHTML ul list in place, we can set
about styling the list into a well-defined navigation
bar.
A lot can be done with simple border and
background colour styling.
However, we can also use images for a more
button-like, or tab-like look and feel.
SM5312 week 11: CSS Menus & Navigation Bars
6
Navigation Bars in CSS: images
For a simple rollover button effect, we only need 1
image:
We can combine the ‘off’ state and the ‘on’ state
(or rollover state) in one image.
Unlike javascript-enabled buttons, we don’t need
to put any text in our button images. The text on
top comes directly from text in the ul list in the
XHTML.
SM5312 week 11: CSS Menus & Navigation Bars
7
Navigation Bars in CSS: images
For a tab effect, we can use 2 images:
One image for the ‘selected’ or ‘front-most’ tab.
One image with some bottom shading for the
‘unselected’ or ‘recessed’ tabs.
(Its also possible to use the single image format
for tabs too, depending on tab spacing and how
you want your tabs to look)
SM5312 week 11: CSS Menus & Navigation Bars
8
Navigation Bars in CSS: Key Properties
For the ul element, we simply set the margins and
padding to 0, and set the list-style-type to ‘none’.
This turns off all bullet and indent styling
We then apply most of the styling to the ul a
element (descendent selector; the a element
inside the ul element)
SM5312 week 11: CSS Menus & Navigation Bars
9
Navigation Bars in CSS: Key Properties
#navbar ul a {
display: block;
Forces an inline element to act
like a block element
Fixed width and height to
match dimensions of image
Forces text to vertically align
centre
width: 200px;
height: 40px;
line-height: 40px;
SM5312 week 11: CSS Menus & Navigation Bars
Loads the button image in the
background of the block and
tells it to align with left and
bottom edges
10
Vertical & Horizontal Navigation Bars
The previous CSS rule will produce a vertical nav bar, i.e
with each button stacked vertically.
To create a horizontal nav bar, we can either change the
display property to ‘inline’ (from ‘block’), or tell the li
elements to float left;
#navbar ul li {
float: left;
}
This second property is preferable, because the
display:inline; property is not reliable in some browsers.
SM5312 week 11: CSS Menus & Navigation Bars
11
Nav Bar Hover or MouseOver Effect
The hover or mouseover effect is applied to the
a:hover property, as a descendent selector of
#navbar;
#navbar a:hover {
color: #fff;
Forces the image to align to the right
text-decoration: underline;
edge of the block element, thereby
exposing the dark blue or ‘highlight’
section of the button graphic.
SM5312 week 11: CSS Menus & Navigation Bars
12
Nav Bars in Practise
Copy these files from the SM5312/Tutorials Folder:
hong_kong_with_image.html
hongkong3.css
/images (the whole images folder)
Copy these to your tutorial site root folder (i.e. the
root folder you have defined in Dreamweaver).
Replace any existing folders and files with the
same names.
(Optional: copy the /PSDs folder)
SM5312 week 11: CSS Menus & Navigation Bars
13