Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Navigation

2008012401 Email to Ronx
 

Navigation Bars

Building Navigation Bars from Lists


Link Bars

There are many ways of constructing navigation bars, including:

  • FrontPage components
  • Tables
  • Lists
  • Third Party DHTML solutions

Lists

A list of links can be styled into a navigation bar.
Start with an unordered  list of links and place the list in container. The container should have an id or class definition (in this case starting with a <div> without a class or id.):

The HTML for this list is:
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>

Add some CSS:  (in order to re-use the class "navbar" used elsewhere in this page, <div> has been changed to <div class="navbar">

.navbar {margin: 0; padding: 0; border: none; background: white; }
.navbar ul {background-color: white; list-style: none; margin:0; }
.navbar li {margin: 0 1px; float: left; width: 100px; padding: 0;}
.navbar li a {font-size: x-small; background-color: #E7E7DA; border: solid #FFFFEE 1px; border-color: #FFFFEE #AAAB9C #CCCCCC #FFFFFF; color: #000000; display: block; font-weight: bold; padding: .2em .5em .25em .5em; text-align: center; text-decoration: none; }
.navbar a:visited {color: #000000; }
.navbar a:hover, .navbar a:focus, .navbar a:active {background-color: #E0E0C7; border-color: #AAAB9C #FFFFEE #FFFFFF #CCCCCC; color: #AA0000; }
.clrb {clear: both; font-size: 0; line-height: 0;}

results in:

This provides a top level link bar, other link bars can be constructed in a similar way. In this web site several small lists are used to construct the main menu above, and the left menus in different sections. Some of these lists are:


<ul>
  <li><a href="/mainpage/about.aspx" class="lk11">About this site</a></li>
  <li><a href="/mainpage/sitemap.html" class="lk12">Site Map</a></li>
  <li><a href="/feedback/default.asp" class="lk13">Contact</a></li>
  <li><a href="/mainpage/privacy.html" class="lk14">Privacy</a></li>
</ul>


<ul>
  <li><a href="/gsp/Ashford.aspx" class="lk31">Ashford</a></li>
  <li><a href="/gsp/PCT.aspx" class="lk32">PCT</a></li>
</ul>


<ul>
<li><a href="/fp/wf1/Information.aspx">Information</a></li>
<li><a href="/fp/wf3/FrontPage.aspx">FrontPage</a></li>
<li><a href="/fp/wf4/Expression_Web.aspx">Expression Web</a></li>
<li><a href="/fp/wf6/General_HTML.aspx">General HTML</a></li>
<li><a href="/fp/wf11/Other_Technologies.aspx">Other Technologies</a></li>
<li><a href="/fp/wf17/Hardware.aspx">Hardware</a></li>
<li><a href="/fp/wf18/Forms.aspx">Forms</a></li>
<li><a href="/fp/wf21/Graphics.aspx">Graphics</a></li>
<li><a href="/fp/wf22/Navigation.aspx">Navigation</a></li>
</ul>

These can be made into navigation bars in the same way as the example above.

To include the home page needs a little more code:

<ul>
  <li><a href="/" class="lk1">Home</a></li>
</ul>
<ul>
  <li><a href="/mainpage/about.aspx" class="lk11">About this site</a></li>
  <li><a href="/mainpage/sitemap.html" class="lk12">Site Map</a></li>
  <li><a href="/feedback/" class="lk13">Contact</a></li>
  <li><a href="/mainpage/privacy.html" class="lk14">Privacy</a></li>
</ul>

with the end result:

 

The lists above can be stored as pages, and added as link bars using the FrontPage include component. This component also works in Expression Web.

The code for the above nav bar is:

<div class="navbar">
  <ul>
  <li><a href="#">Home</a></li>
  </ul>
  <!--webbot bot="Include" U-Include="../../../menu_incs/site_inc.htm" TAG="BODY" -->
  <div class="clrb">&nbsp;</div>
</div>