Static html Template - Creat a Tabbed Menu
If you wish to make a tabbed menu, heres how. The example below is used for switching between pages (URLS), for switching betweeen div's see this example.
NB. If you would like to read the documentation on this script by Douglas Bowman, see http://www.alistapart.com/articles/slidingdoors.
Example of a Tab Menu
In the source code of your template, add the following to the head of the page:
In the source code of your template, add the following to the body of the page:
<div class="tabmenu">
<ul id="tabmenu_ul">
<li><a href="#">Home</a></li>
<li class="current" id="current" ><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="tabmenubar">
<div class="tabmenubarinner">
Welcome to the news page
</div>
</div>
<div class="tabmenucontents">
<div class="tabmenucontentsinner"> <i>Feb 6, 2007</i><br />
<b>UniProt v9.6 released</b><br />
The UniProt Release 9.5 consists of ... <a href="#">more</a><br />
<i>Feb 6, 2007</i><br />
<b>UniProtKB/Swiss-Prot v51.6 released</b><br />
Release 51.6 of UniProtKB/Swiss-Prot ... <a href="#">more</a><br />
<i>Feb 6, 2007</i><br />
<b>UniProtKB/TrEMBL v34.6 released</b><br />
Release 34.6 of UniProtKB/TrEMBL ... <a href="#">more</a><br />
<br />
</div>
</div>
<script type="text/javascript" src = "/inc/js/tabmenu.js"></script>
Basically you create a <div class="tabmenu"> and put a nested list inside it with a <li class="current"> for the highlighted tab.
 |
<link rel="stylesheet" href="/inc/css/tabmenu.css" type="text/css" />
<!-- end meta tags, css , javascript here -->