Home > Chapter Review and Exercises > Chapter 5 > Navigation Menus
Navigation menus are first covered on page 84 of the class text.
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>