Home > Chapter Review and Exercises > Chapter 5 > Navigation Menus
Navigation menus are first covered on pages 83-84 of the class text:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">Shop</a></li>
</ul>
</nav>
Here are some links to w3schools.com instructional websites. Be sure to use the Try It Yourself feature and experiment with different settings.
CSS Navigation Bar -- using <ul>
CSS Vertical Navigation Bar -- using <ul>
CSS Horizontal Navigation Bar -- using <ul>
How to create a dropdown navigation bar -- using <div> and float
How to create a top navigation bar with CSS-- using <div> and float
How to create an animated, closable side navigation menu - includes JavaScript which we have not covered yet
How to create a responsive top navigation menu - includes JavaScript which we have not covered yet
How to create a subnavigation menu with CSS - includes JavaScript which we have not covered yet
<!DOCTYPE html>
<html lang="en">
<style>
a {
background-color: green;
color: white;
text-decoration: none;
padding: 5px;
border: 3px solid red;
margin: 10px;
font: 30px Arial, san-serif;
}
li {
list-style-type: none;
display: inline;
}
div {
background-color: pink;
}
</style>
<body>
<div>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://webdesign.gbcseagles.org" target="_blank">WebDesign</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<br>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>