spacer
Icon Box Heading

Some text you would like to add some blah blah blah.

  • Heading

    Your heading summary and add link to url...
    more

Some text you would like to add some blah blah blah...
more



Collapse Sliding Box Heading

Some text you would like to see when the red arrow is clicked

  • Heading

    Your heading summary and add link to url...
    more

Some text you would like to add some blah blah blah...
more

spacer
EBIEBI Style TemplatesStatic Style TemplatesEdit/Add Left Menu Content

Static html Template - Edit/Add Left Menu Content

The left menu section has a width of 145px. An example left menu is shown on the left of this page.

Use the styles and headings we have recommended below.

In the source code look for the following comment tags:

<!-- start left menu here -->

Paste your left menu html source code in between these comment tags

<!-- end left menu here -->

Example Included Left Menu with JQuery

This method is a good way of making a menu once, then re-using it with customisation, a good example of this is GOA.

  1. Make a seperate file for the menu, as in the GOA menu: 
    <ul id="sidemenuid" class="sidemenu">
      <li id="item01" ><a href = "/GOA/">GOA Home</a></li>
      <li id="item02" ><a href = "/GOA/newto.html">New to GOA?</a></li>                                      
    .....
</ul>
  2. Include this in the page using ajax: 
    <!-- start left menu here -->
<script type="text/javascript" src="/inc/js/jquery.js"></script> 
    <script type="text/javascript">           
        $(document).ready(function() {  
            $("#leftmenu").load("/GOA/menus/default.html");                               
    });  
</script>
<!-- end left menu here -->
  3. Add a red bot, or an open sub menu by adding a callback to set the css, for example on the GOA home page: 
    <!-- start left menu here -->
		<script type="text/javascript" src="/inc/js/jquery.js"></script>
        <script type="text/javascript">
    			$(document).ready(function() {	
				$("#leftmenu").load("/GOA/menus/default.html"
					,function(){
    						$("#item01").addClass("clickmeopen");                                                
					}
    				);
			}); 
        </script>
<!-- end left menu here -->
  4. To open several levels of the menu, use the following syntax as in the GOA annotation page: 
    <!-- start left menu here -->		
<script type="text/javascript" src="/inc/js/jquery.js"></script>
            <script type="text/javascript">
    			$(document).ready(function() {	
    				$("#leftmenu").load("/GOA/menus/default.html"
    					,function(){
    						$("#item05").addClass("clickmeopen");
    						$("#item14").addClass("clickmeopen");
    						$("#item14 ul").css("display", "block");                                                   
    					}
    				);
    			}); 
            </script>
<!-- end left menu here -->

Example Included Left Menu with Iframes

An example of using an iframe for the left menu is microarray. 
<!-- start left menu here -->
<iframe src="/microarray/menu.html" name="microarayleftmenu" id="microarayleftmenu" marginwidth="0" 
marginheight="0" 	style="width: 145px; visibility: visible; display: block; z-index: 2;
" 	frameborder="0" height="1400" scrolling="no" width="100%"> </iframe> 
<!-- end left menu here -->

Example Embedded Left Menu

An example left menu is shown on the left of this page. The menu is expandable/collapsible, we recommend you do not use more than 2-level deep menu. When you click on a link on the left menu to go to a page, once on this page this link should then have a red dot next to it (use class="clickmeopen"), even if it doesn't contain a sub-menu. This is an important navigation cue for the user.

There is also an additional 'Icon Box' and 'Sliding Icon Box' which can be added underneath the menu. Use the 'Icon Box' to highlight important events or tools of interest. Avoid using graphics in these Icon Boxes.

To add the left menu to your page select the following html source code and paste in between the comments tags (see above) in your template. An explanation of the styles used is given below.

N.B. add <script type="text/javascript" src="/inc/js/jquery.js"></script> to the head of your page if you need animated icon boxes.


Select All


Left Menu Style's Explanation

<ul id="sidemenuid" class="sidemenu">  </ul>
This is needed for the open/close menu to function.

<li class="clickmeopen">
If there is a submenu class 'clickmeopen' this forces the submenu to be open by default.
<li class="leftmenudivider"></li>
Use this for putting a divider between list items.


<div class="iconboxheading"><a href="#">Icon Box Heading</a> </div>
This is where you put the heading for your Icon Box. You can remove the link to the heading if you don't need it.

<div class="iconboxcontents"> </div>
This is where you add any content to the Icon Box. We recommend you don't insert graphics within this div.

<div class="slidecontainer"> </div>
Basically the same as the icon box above, with the addition of a parent "slidecontainer" tag. Clicking on the arrow causes the box to show/hide.
To add more sliding boxes just update the 'id' in the header and contents tags.

Example -

Box1 will be:

<span class="headerToggle" id="news">
<div class="iconbox2contents" id="news_content" style="display: block">

Box2 will be:

<span class="headerToggle" id="news2">
<div class="iconbox2contents" id="news2_content" style="display: block">


Top

Now add some centre content to the templates: spacer
spacer