CSS Navigation Bars
Moving between the different sections of a website is easier with a navigation bar, which makes it an important part of web design.
You usually find one at the top or side of a webpage, built from the HTML list elements <ul> and <li> and then styled with CSS.
Navigation Bar = List of Links
At heart, a navigation bar is a list of links, which is why <ul> and <li> are such a natural fit.
Basic list of links
Prompt
Create a basic navigation bar using an unordered list with four links: Home, News, Contact, and About. No CSS styling - just the raw HTML list of links.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar - List of Links</title>
</head>
<body>
<h2>Navigation Bar</h2>
<p>A navigation bar is basically a list of links:</p>
<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>
</html>
Remove bullets and spacing
Start by taking the bullets off the <ul> element and setting its margins and padding back to zero.
Note: Vertical and horizontal navigation bars both build on this code.
Prompt
Create a navigation bar using an unordered list with four links: Home, News, Contact, and About. Remove the bullet points with list-style-type: none, and reset margin and padding to 0 on the ul element.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar - Remove Bullets</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Navigation Bar</h2>
<p>A navigation bar with no bullets, margins, or padding:</p>
<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>
</html>