Title: An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars
1An Introduction to Cascading Style SheetsCSS
Menus and Navigation Bars
2Navigation 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
3Navigation 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
4Navigation Bars in XHTML
- Creating a Navigation Bar in HTML is easy
ltulgt ltligtlta href""gtHomelt/agtlt/ligt ltligtlta
href""gtProductslt/agtlt/ligt ltligtlta href""
gtServiceslt/agtlt/ligt ltligtlta href""gtAbout Us
lt/agtlt/ligt ltligtlta href""gtContact Uslt/agtlt/l
igt lt/ulgt
Just a simple unordered list, with each ltligt
element enclosed in a hypertext link lta hrefgt
element.
5Navigation Bars in XHTML
- However, its normal to wrap your navigation
list in a div element with a specific ID name -
- This allows us to apply specific styling to the
ul, li, and a sub-elements without affecting the
rest of the page styling.
ltdiv idnavbargt ltulgt ltligtlta href""gtHomelt/
agtlt/ligt ltligtlta href""gtProductslt/agtlt/ligt
ltligtlta href""gtServiceslt/agtlt/ligt
ltligtlta href""gtAbout Uslt/agtlt/ligt
ltligtlta href""gtContact Uslt/agtlt/ligt
lt/ulgtlt/divgt
6Navigation 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.
7Navigation 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 dont need
to put any text in our button images. The text on
top comes directly from text in the ul list in
the XHTML.
8Navigation 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)
9Navigation 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)
10Navigation Bars in CSS Key Properties
- navbar ul a display block width 200px
height 40px line-height 40px
background CCCCCC url(images/menubase_1.png)
no-repeat left bottom text-align center
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
Loads the button image in the background of the
block and tells it to align with left and bottom
edges
11Vertical 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
displayinline property is not reliable in some
browsers.
12Nav Bar Hover or MouseOver Effect
- The hover or mouseover effect is applied to the
ahover property, as a descendent selector of
navbar - navbar ahover color fff text-decora
tion underline background-position right b
ottom
Forces the image to align to the right edge of
the block element, thereby exposing the dark blue
or highlight section of the button graphic.
13Nav 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)