Slide 12 of 16

Adding a Navigation Bar

Details

  1. Hidden H2 to indicate "Main Menu"
  2. Using a list for the collection of links
  3. Using "class" to provide CSS selectors for list items and links

HTML Code

...
<td class="submenu" width="15%">
  <h2 class="navbar">Main Menu</h2>
     <ul class="navbar">
     <!-- InstanceBeginEditable name="navbar" -->
     <li class="navbar"><a class="navbar_selected" href="schedule.htm">Schedule</a></li>
     <li class="navbar"><a class="navbar" href="presenters.htm">Presenters</a></li>
     <li class="navbar"><a class="navbar" href="resources.htm">Resources</a></li>
     <!-- InstanceEndEditable -->
   </ul>
</td>
...

CSS Code

...
h2.navbar {
  visibility: hidden;
  font-size: xx-small;
  border: none;
  margin: 0;
  padding: 0;
}

ul.navbar {
  margin: 0;
  margin-right: 1em;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
  font-size: 12px;
}

li.navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
  font-size: 12px;
}

a.navbar {
  padding-left: 1em;
  padding-right: .25em;
  padding-top: .25em;
  padding-bottom: .25em;
  text-decoration: none;
  display: block;
  width: 100%;
}

a.navbar_selected {
  padding-left: 1em;
  padding-right: .25em;
  padding-top: .25em;
  padding-bottom: .25em;
  text-decoration: none;
  display: block;
  width: 100%;
}
a.navbar:link{
  color: #000000;
}
a.navbar:visited{
  color: #000000;
}

a.navbar:hover{
  color: white;
  background: #CC3300;
  text-decoration: underline;
}
a.navbar:active{
  color: white;
  background: #CC3300;
  text-decoration: underline;
}
a.navbar_selected:link {
  color: white;
  background: #CC3300;
}
a.navbar_selected:visited {
  color: white;
  background: #CC3300;
}
a.navbar_selected:hover{
  text-decoration: underline;
}
a.navbar_selected:active{
  text-decoration: underline;
}
...