spacer

Static html Template - Creat a Tabbed Menu

The example below is used for switching between div's, for switching between pages (URLS) see this example.

Example of a Tab Menu


On click the contents are loaded into this div.



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 id="li_home"><a href="javascript:setItemLayer('home', 'Home page');">Home</a></li> 
    <li id="li_news" class="current"><a href="javascript:setItemLayer('news','All the
	 latest news stories');">News</a></li> 
    <li id="li_products"><a href="javascript:setItemLayer('products','View the products 
	we have on offer');">Products</a></li> 
    <li id="li_about"><a href="javascript:setItemLayer('about','About our services');">
	About</a></li> 
    <li id="li_contact"><a href="javascript:setItemLayer('contact','Contact Details');">
	Contact</a></li> 
  </ul> 
</div> 

<div class="tabmenubar"> 
  <div id="menubar" class="tabmenubarinner"> 
  On click the header text is written here. 
  </div> 
</div> 

<div class="tabmenucontents"> 
  <div id="inner_text" class="tabmenucontentsinner"> 
  On click the contents are loaded into this div. 
  </div> 
</div> 

 <div id="item_home" style="display:none"> 
  <span class="small">Some blah for the homepage.</span> 
  </div> 
 <div id="item_news" style="display:none"> 
  <span class="small">Some blah for the news page.</span> 
  </div> 
 <div id="item_products" style="display:none"> 
  <span class="small">Some blah for the products page.</span> 
  </div> 
 <div id="item_about" style="display:none"> 
  <span class="small">Some blah for the about page.</span> 
  </div> 
 <div id="item_contact" style="display:none"> 
  <span class="small">Some blah for the contact page.</span> 
  </div> 
 
 <script type="text/javascript" src = "/inc/js/tabmenu.js"></script> 
     
  <script type="text/javascript"> 
  setItemLayer('news','All the latest news stories'); 
 </script>













spacer
spacer