SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall

SM5312 week 11: CSS Menus & Navigation Bars2 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 Bars3 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 Bars4 Navigation Bars in XHTML Creating a Navigation Bar in HTML is easy: Just a simple unordered list, with each element enclosed in a hypertext link element. Home Products Services About Us Contact Us

SM5312 week 11: CSS Menus & Navigation Bars5 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. Navigation Bars in XHTML Home Products Services About Us Contact Us

SM5312 week 11: CSS Menus & Navigation Bars6 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 Bars7 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 Bars8 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 Bars9 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 Bars10 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

SM5312 week 11: CSS Menus & Navigation Bars11 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 Bars12 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; text-decoration: underline; background-position: right bottom; } 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.

SM5312 week 11: CSS Menus & Navigation Bars13 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)