- Home
- Products
- Services
This allows us to apply specific styling to the ul , li , and a SM5312 week 11: CSS Menus & Navigation Bars - Contact Us
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 { Forces an inline element to act like a block element display: block; 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; exposing the dark blue or ‘highlight’ section of the button graphic.
SM5312 week 11: CSS Menus & Navigation Bars background-position: right bottom; 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