Home arrow HTML arrow Completing a Bulleted Menu Of Links

Completing a Bulleted Menu Of Links

In the previous part of this two-part tutorial, I began describing how to build a bulleted menu of links, such as you might see on many web sites. These links unfold, so that some headings, when clicked, reveal links below them to pages that are subcategories. In this second part, I will jump right back into the subject, starting with the JavaScript code we need to accomplish the magic.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
March 02, 2009
  1. · Completing a Bulleted Menu Of Links
  2. · The expandOrCollapse(leftIDpart, rightIDpart) Function
  3. · Global Variables
  4. · Still on Second Level Event
  5. · Other List-Item Markers

print this article

Completing a Bulleted Menu Of Links
(Page 1 of 5 )

The JavaScript Code

Each ID is made up of two parts: the left part, which is either LI or UL; and the right part, which is a number. When any LI element that is expandable is clicked, the function “splitID(ID)” is called. This function splits the ID into two parts, throwing away the underscore. The function is:

function splitID(ID)


IDPartsArr = ID.split("_");


//call the function to expand or collapse the unordered list

expandOrCollapse(IDPartsArr[0], IDPartsArr[1]);


When you click an expandable link, it calls the function, sending its ID as argument. JavaScript has a string method called split(separator). The method splits a string based on a separator and discards the separator. You use the method with the string function as follows:


So, for example, if the string object is “LI_11,” the result will be two sub strings, which are “LI” and “11.” The underscore is discarded. In our example above, the ID is the string object. An array is returned by the JavaScript method. The elements of the array are the spitted sub strings. In our example, the array is held by the IDPartsArr variable. In our project, this array will always have two elements: the first one, “LI” or UL, and the second one, a number.

Lastly, this function calls another function, “expandOrCollapse().” The first argument of this function is the first element of the IDPartsArr array. The second argument of the function is the second element of the IDPartsArr array.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials