1. Navigation Bars Level 2 Extended Certificate Unit B12 Doing Business Online

2. Navigation Bars Assume we have an unordered list of links Home News Contact About Note: href”#” is used for test links. Replace with URLs to your pages

3. Create this file – navbar.html Home News Contact About

4. Appears like this

5. Use CSS to remove the bulllets ul { list-style-type:none; margin:0; padding:0; } Home News Contact About list-style-type:none; removes the bullets margin:0; padding:0; Removes browser default settings

6. Appears like this

7. Make it horizontal ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } Only the changes to the CSS in the are shown Overflow:hidden prevents text moving outside the box The list items (li) float to the left of the box The links (a) are put in a display box with width 60 pixels and colour grey

8. Appears like this

9. Hover a:hover { background-color:#7A991A; } Add this to the CSS and the block will change colour when you hover over it with the mouse

10. Task Add a horizontal navigation bar to each of your web pages Make sure your colours match your overall theme Position it at the top of the page Don’t forget to change the href “#” to URLs for your pages