Script File

jq.buildTreeNav.js ( view )

Available Options

overallWidth

A string specifying the overall width of the navigation module. Default value is "auto", which will fill the containing element.

controlAll

Boolean value specifying whether to include global control links to expand and collapse all nodes. Default value is true.

controlAlign

A string specifying the horizontal alignment of the control elements. Default value is "left".

initialState

A string specifying whether the tree nodes should be "collapsed" (the default) or "expanded" when the page initially loads.

Basic Usage

$("ELEMENT").buildTreeNav();

$("ELEMENT").buildTreeNav({ options });

where ELEMENT is an unordered list.

Minimum Browser Support

• Apple Safari 3
• Google Chrome 1
• Microsoft Internet Explorer 6
• Mozilla Firefox 3
• Opera 9

Note: There is a slight display anomaly in IE6, due to a bug in that browser's CSS implementation, that can be seen if folder nodes are opened and closed in a particular order. Functionality is not, however, impaired in any way.

This example uses the default settings, full width and global controls aligned to the left.

• Primary Level A
  • Secondary Level A1
  • Secondary Level A2
  • Secondary Level A3
• Primary Level B
  • Secondary Level B1
  • Secondary Level B2
    • Tertiary Level B2a
    • Tertiary Level B2b
    • Tertiary Level B2c
  • Secondary Level B3
    • Tertiary Level B3a
    • Tertiary Level B3b
    • Tertiary Level B3c
  • Secondary Level B4
  • Secondary Level B5
• Primary Level C
  • Secondary Level C1
  • Secondary Level C2
  • Secondary Level C3
• Primary Level D
  • Secondary Level D1
  • Secondary Level D2
  • Secondary Level D3

Associated Code

<script type="text/javascript">
$(document).ready(function() {
  $("#navLists").buildTreeNav();
  });
</script>

This example specifies a fixed width, and displays the global control links aligned to the right.

• Primary Level A
  • Secondary Level A1
  • Secondary Level A2
  • Secondary Level A3
• Primary Level B
  • Secondary Level B1
  • Secondary Level B2
    • Tertiary Level B2a
    • Tertiary Level B2b
    • Tertiary Level B2c
  • Secondary Level B3
    • Tertiary Level B3a
    • Tertiary Level B3b
    • Tertiary Level B3c
  • Secondary Level B4
  • Secondary Level B5
• Primary Level C
  • Secondary Level C1
  • Secondary Level C2
  • Secondary Level C3
• Primary Level D
  • Secondary Level D1
  • Secondary Level D2
  • Secondary Level D3

Associated Code

<script type="text/javascript">
$(document).ready(function() {
  $("#navLists2").buildTreeNav({
    overallWidth : "200px",
    controlAlign : "right"
    });
  });
</script>

This example specifies a fixed width, but suppresses display of the global control links and expands the tree nodes on the initial page load.

• Primary Level A
  • Secondary Level A1
  • Secondary Level A2
  • Secondary Level A3
• Primary Level B
  • Secondary Level B1
  • Secondary Level B2
    • Tertiary Level B2a
    • Tertiary Level B2b
    • Tertiary Level B2c
  • Secondary Level B3
    • Tertiary Level B3a
    • Tertiary Level B3b
    • Tertiary Level B3c
  • Secondary Level B4
  • Secondary Level B5
• Primary Level C
  • Secondary Level C1
  • Secondary Level C2
  • Secondary Level C3
• Primary Level D
  • Secondary Level D1
  • Secondary Level D2
  • Secondary Level D3

Associated Code

<script type="text/javascript">
$(document).ready(function() {
  $("#navLists3").buildTreeNav({
    overallWidth : "300px",
    controlAll   :  false,
    initialState : "expanded"
    });
  });
</script>