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_us.html" 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="/galleries/default.asp?tp=Ashford" class="lk31">Ashford</a></li>
<li><a href="/galleries/default.asp?tp=PCT" class="lk32">PCT</a></li>
</ul>
<ul>
<li><a href="/fp/" class="lk41">About WebFaqs</a></li>
<li><a href="/fp/wf-menu.asp?id=4" class="lk42">General HTML</a></li>
<li><a href="/fp/wf-menu.asp?id=3" class="lk43">FrontPage</a></li>
<li><a href="/fp/wf-menu.asp?id=13" class="lk44">BTI Specific</a></li>
<li><a href="/fp/b/smtp/" class="lk45">Setup SMTP for FrontPage Extensions</a></li>
<li><a href="/fp/b/buttons/" class="lk46">FrontPage Interactive Buttons</a></li>
<li><a href="/tests/" class="lk47">Tips</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_us.html" 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>