Home arrow HTML arrow Page 5 - Completing a Bulleted Menu Of Links
HTML

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 / 3
March 02, 2009
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Completing a Bulleted Menu Of Links - Other List-Item Markers
(Page 5 of 5 )

In HTML (CSS and JavaScript) parlance, a bullet is called a List-Item Marker. You can have images as list-item markers. You can have one image to indicate an expanded list-item, another to indicate a collapsed list-item and yet another to indicate a list-item that is not expandable. To achieve this, the style attribute should be:


Style = “list-style-image: url(bullet.gif)”


where “bullet.gif” should be replaced by the path and name of the image of the bullet.


Conclusion

Expandable bulleted links, as I have explained, can be used on a web page when you need something to the effect of a menu. When a list item is expanded, you can see the links that are a subset of a higher-level link.

Your own project lists may not be as structured as the one we discussed in these two articles. That is, a first level link may have only one sub-list and no third level, while another first level link may even have a fourth level link. All you have to do is to modify the above code to suit your purpose. 

 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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