An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars

1. An Introduction to Cascading Style SheetsCSS Menus and Navigation Bars Nick Foxall SM5312 week 11: CSS Menus & Navigation Bars

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

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

4. 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> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> • Just a simple unordered list, with each <li> element enclosed in a hypertext link <a href> element. SM5312 week 11: CSS Menus & Navigation Bars

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. <div id=“navbar”> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul></div> SM5312 week 11: CSS Menus & Navigation Bars

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

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

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

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

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

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 display:inline; property is not reliable in some browsers. SM5312 week 11: CSS Menus & Navigation Bars

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

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