<< .. Go to : : Schedule : : Exercise 7 : : Demo 7A : : Demo 7B : : Demo 7C : : Demo 7D : : Demo 7E : : Demo 7F : : All Class Demos .. >>

Exercise 7 Demo: Part D : Simple CSS Page Layout - Sidebar Navigation Using Lists

A Navigation List
on the Side

Delete the horizontal navigation and use this area for the main navigation or use this area for sub-navigation on select pages

Main Content Section

You can use this style of NAVIGATION as your main navigation or use it for additional navigation if you need it.

The HTML Code:

<div id="sidenav">
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a> </li>
<li> <a href="products.html">Our Products</a> </li>
<li> <a href="news.html">In the News</a> </li>
<li> <a href="contact.html">Contact Us</a> </li>

The CSS Styles:

ul, li {padding: 0; margin: 0;}

#sidenav {width: 200px; text-align: left; float: left;}

#sidenav ul {list-style: none;
margin-left: 10px;
margin-bottom: 15px;
font-family: Comic Sans MS, sans-serif;
letter-spacing: 1px;}

#sidenav li {width: 180px;
border: 1px solid #4e5db4;
background-color: #394484;
/* Add: margin-bottom: 5px; to add a space between each button */
#sidenav li a {display: block;
padding: 10px 0 10px 30px;
text-decoration: none; /* deletes the underline */
font-weight: bold;
color: #792d0b;}

#sidenav li a:hover {background-color: #8f97c2;
color: #ffffff; }