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 header text is written here.

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:

<link rel="stylesheet" href="/inc/css/tabmenu.css" type="text/css" />

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>