In this article, I will be going over the various features of a bulleted menu of links, including how to implement them in your web page. All explanations will be accompanied by code samples to help you through this process. If you want to learn more about this common web page function, then, by all means, keep reading.
<li onclick="formString('FLL1')" id="FLLLI1"><a href="www.somePage1.com" id="FLL1" title="Click Bullet to Expand">First Level Link 1</a></li>
<li><a href="www.somePage2.com" title="Click Bullet to Expand">First Level Link 2</a></li>
<li><a href="www.somePage3.com" title="Click Bullet to Expand">First Level Link 3</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Other List-Item Markers
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 can be used on a web page when you need something to have the effect of a menu. When a list item is expanded, you can see the links that are the subset of the higher-level link.
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.