Ideas Tree Menu - Set Up Basics

Debug ->

To use the Ideas Tree Menu in your web site:

  1. Download these files to a directory:
    1. menuTree.css
    2. cookies.js
    3. cookiesEnabledTest.js
    4. menuTree.js
  2. In the same directory create your source XHTML files.
  3. In your XHTML file's <head> section link to the style sheet: 
    <style type="text/css">
    <!-- 
    @import url("menuTree.css"); 
    -->
</style>
  4. In your XHTML file's <head> section link to the script files, In this particular order: 
    <script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript" src="cookiesEnabledTest.js"></script>
<script type="text/javascript" src="menuTree.js"></script>
  5. In each of your XHTML files create an unordered list with a structure this: 
    <ul id="menuTreeIdeas" class="menuTree">
  <li><a href="index.html"><span>Home</span></a></li>
  <!-- An <li> "parent" node. It must have a class "parent" -->
  <li class="parent">
    <!-- The first <a> is the "actuator" node. It must have a class "actuator" -->
    <a href="javascript:%20void%20(0);" class="actuator defaultExpand"><span>Documentation</span></a>
    <!-- The <ul> below is the "subMenu" node -->
    <ul>
      <li class="parent">
        <a href="javascript:%20void%20(0);" class="actuator defaultExpand"><span>Features</span></a>
        <ul>
          <!-- the <li> nodes here are mere "leaf" nodes -->
          <li><a href="forTheUser.html"><span>For the User</span></a></li>
          <!-- <spans> surrounding text are important for cross-browser purposes -->
          <li><a href="forTheDeveloper.html"><span>For the Developer</span></a></li>
        </ul>
      </li>
      <li><a href="setUp.html"><span>Set up</span></a></li>
    </ul>
  </li>
  <li class="parent">
  ...

    Note we have four nodes (elements) regarded as:

    1. Parent - must be an <li>
    2. Actuator - must be an <a>. This is the element you click to expand or collapse a subMenu.
    3. SubMenu - is usually a <ul>. This list contains all the leaf nodes.
    4. Leaf - the <a> in a <li>/<a> combo. Is the actual menu command/ page to choose.

  6. Ensure you change the id of the menuTree to something unique

    <ul id="menuTreeIdeas" class="menuTree">
<ul id="menuTreeMyTree" class="menuTree">

  7. Note the following about the tree structure.

    • Parent <li>s must have a "parent" class. This ensures that icons display correctly when JavaScript is turned Off. 
      <ul>
  <li class="parent">
    <a href="javascript:%20void%20(0);" class="actuator defaultExpand"><span>Features</span></a>
    <ul>
    • Actuator <a>s, under the Parent <li>s, must have an actuator class and a href="javascript:%20void%20(0);". You should not use a page url in the href. You should not use href="#" as this will cause the page to scroll to the top. 
      <ul>
  <li class="parent">
    <a href="javascript:%20void%20(0);" class="actuator defaultExpand"><span>Features</span></a>
    <ul>
    • The text within actuator and leaf <a>s must be surrounded by a <span> element for correct cross-browser rendering. 
      <ul>
  <li class="parent">
    <a href="javascript:%20void%20(0);" class="actuator defaultExpand"><span>Features</span></a>
    <ul>
      <li><a href="forTheUser.html"><span>For the User</span></a></li>
  8. Make sure the id of your list is "menuTree" 
    <ul id="menuTree">
  9. Use the custom function addLoadEvent (from menuTree.js) to initialize the menu tree, passing the id of the tree menu that you have previously set. Any code that needs to run under window.onload should be listed here or in another call to addLoadEvent. eg In your XHTML file's <head> section: 
    <script type="text/javascript">
<!--
  addLoadEvent(function() {
    menuTreeMain("menuTreeMyTree");
    // more code to run on window onload event
  });
//-->
</script>