spacer

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


Welcome to the news page
Feb 6, 2007
UniProt v9.6 released
The UniProt Release 9.5 consists of ... more
Feb 6, 2007
UniProtKB/Swiss-Prot v51.6 released
Release 51.6 of UniProtKB/Swiss-Prot ... more
Feb 6, 2007
UniProtKB/TrEMBL v34.6 released
Release 34.6 of UniProtKB/TrEMBL ... more


In the source code of your template, add the following to the head of the page:


<!-- start meta tags, css , javascript here -->

<link rel="stylesheet" href="http://www.ebi.ac.uk/inc/css/tabmenu.css" type="text/css" />

<!-- end meta tags, css , javascript here -->

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.












spacer
spacer