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, I have also changed <div> 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="/gallery/Ashford.aspx" class="lk31">Ashford</a></li>
<li><a href="/gallery/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 - see http://by-expression.com for details (for Expression Web V1, V2 has the Include Page command built in, though it has to be dragged to a toolbar).
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"> </div>
</div>