Banner image SITE-LANGUAGE-en-ICON BROWSER-LANGUAGE--IMAGE
Content / help / concertina .. concise-view << previous next >>

Concertina Menu CSS

This concertina is a combination of HTML markup, as follows, with javascript called to set up various onclick events to open up the concertina menu
Your page must run the JS concertina set up script setConcertina(); This is in biscuits-concertina.js
A PHP view file or controller can add this script into document.ready() with the following PHP code line.
$this->addReadyCode("setConcertina();");
Note: Lines that open up a sub-level list, should also be anchor tags. EG: <a> Slides </a>

Concertina Code

<div class="concertina">
 <ul>
 <li> <a> <h1> Concertina Menu Example (Click on a domain name for some favourite pages ) </h1> </a> </li>
 <li> <a> Three level </a>
  <ul>
  <li> <a> level two </a>
   <ul>
    <li> <a> level three </a>
   </ul>
  </ul>
 <li> <a> Leon Wooldridge </a>
  <ul>
   <li> <a href="http://leonwooldridge.co.uk/content/browse/music" target="_blank"> Music </a> </li> 
  </ul>
 </li>
 <li> <a> English Tap </a> 
  <ul> 
   <li> <a href="http://englishtap.com/content/browse/EFL/childrens-english" target="_blank">Children's English Content Area </a> </li>
   </ul>
  </li>
 <li> <a> Chess Pub  </a>
  <ul>
   <li> <a href="http://chesspub.co.uk" target="_blank"> Chess Home Page </a> </li>
  </ul>
 </li>
 <li> <a> Mark Art </a>
  <ul>
   <li> <a href="http://markart.co.uk" target="_blank"> Mark Wooldridge's Art & Music Site </a> </li>
  </ul>
 </li>
 <li> <a> Pig Craft </a>
  <ul>
   <li> <a href="http://pigcraft.co.uk" target="_blank"> Pig Craft Home </a> </li>
  </ul>
 </li>
 <li> <a> Post Off Pat </a>
  <ul>
   <li> <a href="http://postoffpat.co.uk" target="_blank"> Mailing & Mail Sorting </a> </li>
  </ul>
 </li>
 <li> <a> Web Tap </a>
  <ul>
   <li> <a href="http://webtap.co.uk" target="_blank"> Web Tap Home </a> </li>
  </ul>
 </li>
 <li> <a> Word Ties </a>
  <ul>
   <li> <a href="http://wordties.com" target="_blank"> Word Ties Game </a> </li>
  </ul>
 </li>
 <li> <a> This Site (iBiscuits) </a>
  <ul>
   <li> <a href="/" target="_blank"> I Biscuits - (Your site hostings, development & management) </a> </li>
  </ul>
 </li>
 </ul>
</div>




iBiscuits LOGO