Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. A navigation bar uses standard HTML as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
STEP 1: Create a list of links for the navigation bar:
| HTML file: | Displayed by browser: |
|---|---|
|
<body>
<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> </body> |
STEP 2: In the CSS stylesheet, use "list-style-type: none;"to remove the bullets because navigation bars do not need list markers. By setting both margins and padding to 0, we override the browser's default settings for both:
| CSS stylesheet file: | Displayed by browser: |
|---|---|
|
<style>
ul { list-style-type: none; margin: 0; padding: 0; } </style> |
Both vertical and horizontal navigation bars use this standard code. First, we will create the horizontal navigation bar and then a vertical navigation bar.
