An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars

1
An Introduction to Cascading Style SheetsCSS
Menus and Navigation Bars

• Nick Foxall

2
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

3
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

4
Navigation 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.
5
Navigation 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
6
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.

7
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 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.

8
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)

9
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)

10
Navigation 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
11
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
  displayinline property is not reliable in some
  browsers.

12
Nav 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.
13
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)