Bulleted Menu of Links - Algorithm
(Page 3 of 5 )
The algorithm for the complete JavaScript code is as follows:
When you click a bullet, the list item either expands or collapses. When the list item does not have a sub-list, nothing happens when you click its bullet. Note, in this example, that only the First Level and Second Level links can be expanded. Now each first level or second level link has a global variable associated with it in the JavaScript. Each of the variables can either take the value “Expand” or “Collapse” to indicate whether the list item is able to be expanded or collapsed. Any list item that does not have a sub-list does not need this corresponding variable. Note that the last level of link items are not expandable.
There are also three global string variables, one for each First Level Link list item. There are also three functions, one for each First Level Link (list item). Each function creates a string made up of its First Level Link list item along with the list items of any of its expansions. The function does this beginning with the third (last) level, then the second level, and finally the first level. Each function is placed below the global variables.
When a function is called, it first creates strings of the list items of the third (last) level links; these strings may or may not be needed. It then verifies which second level or first level list item was clicked by checking the ID. If this list item was already expanded, it gives its corresponding global variable the opposite value, which is “Collapse.” If the list item was already collapsed, it gives the corresponding opposite global variable, “Expand.” The function then creates strings for the second level list items depending on the values: Expand or Collapse. It adds these strings to any string in the third level items that might have been created. The function adds the resulting string to the first level global string.
Note: when a bullet is clicked anywhere in a chain (expansion), only one global (first level) string is affected; namely, the one that has the bullet in its chain. The other two global strings are not affected. The last thing a function does is combine its global string with the other two global strings. This way, processing time is reduced, since the other two global strings do not have to be changed.
Finally, the function sets the content of the table cell with the DOM innerHTML property. Below I give the code mainly for the First Level Link 1 in order to avoid taking up too much space:
<html>
<head>
<script type = "text/javascript">
var FLL1Direction = ""; //to expand or to collapse global variable for First Level Link 1
var SLL11Direction = ""; //to expand or to collapse global variable for Second Level Link 11
var SLL12Direction = ""; //to expand or to collapse global variable for Second Level Link 12
var SLL13Direction = ""; //to expand or to collapse global variable for Second Level Link 13
//global First Level strings
var string1 = "<li onclick="formString('FLL1')" id="FLLLI1" style='list-style-type: disc' title="Click Bullet to Expand"><a href='www.somePage1.com' id="FLL1" title='Click Bullet to Expand'>First Level Link 1</a></li>";
var string2 = "<li><a href='www.somePage2.com' title='Click Bullet to Expand'>First Level Link 2</a></li>";
var string3 = "<li><a href='www.somePage3.com' title='Click Bullet to Expand'>First Level Link 3</a></li>";
//to form string
function formString(ID)
Next: Code continued >>
More JavaScript Articles
More By Chrysanthus Forcha
