HTML

Building a Bulleted Menu Of Links: Display Method

Many web pages display their links in the form of a bulleted menu. You can make such menus a bit more interesting by adding functionality to expand and contract the menu, if it makes sense to divide the menu into levels. This two-part article will show you how to do it.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 3

February 23, 2009

TABLE OF CONTENTS:

The following is what you have for the UL and LI elements for fig. 2. Go through it, noting that all the UL elements have the CSS property “display:none” except the first, which has “display:block” by default. This default property does not have to be typed. Also note the IDs and the way they have been given. Each LI element has an onclick attribute.

<div>

<li onclick="splitID('LI_1')" id="LI_1" title="Click Bullet to Expand"><a href="www.somePage1.com">First Level Link 1</a></li>

<li onclick="splitID('LI_11')" id="LI_11" title="Click Bullet to Expand"><a href="www.somePage11.com">Second Level Link 11</a></li>

<li onclick="timesToIgnore = 2" id=""><a href="www.somePage111.com">Third Level Link111</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage112.com">Third Level Link112</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage113.com">Third Level Link113</a></li>

</ul>

<li onclick="splitID('LI_12')" id="LI_12" title="Click Bullet to Expand"><a href="www.somePage1.com">Second Level Link 12</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage121.com">Third Level Link121</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage122.com">Third Level Link122</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage123.com">Third Level Link123</a></li>

</ul>

<li onclick="splitID('LI_13')" id="LI_13" title="Click Bullet to Expand"><a href="www.somePage13.com">Second Level Link 13</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage131.com">Third Level Link131</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage132.com">Third Level Link132</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage133.com">Third Level Link133</a></li>

</ul>

<li onclick="splitID('LI_2')" id="LI_2" title="Click Bullet to Expand"><a href="www.somePage2.com">First Level Link 2</a></li>

<li onclick="splitID('LI_21')" id="LI_21" title="Click Bullet to Expand"><a href="www.somePage1.com">Second Level Link 21</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage211.com">Third Level Link211</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage212.com">Third Level Link212</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage213.com">Third Level Link213</a></li>

</ul>

<li onclick="splitID('LI_22')" id="LI_22" title="Click Bullet to Expand"><a href="www.somePage1.com">Second Level Link 22</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage221.com">Third Level Link221</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage222.com">Third Level Link222</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage223.com">Third Level Link223</a></li>

</ul>

<li onclick="splitID('LI_23')" id="LI_23" title="Click Bullet to Expand"><a href="www.somePage1.com">Second Level Link 23</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage231.com">Third Level Link231</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage232.com">Third Level Link232</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage233.com">Third Level Link233</a></li>

</ul>

<li onclick="splitID('LI_3')" id="LI_3" title="Click Bullet to Expand"><a href="www.somePage3.com">First Level Link 3</a></li>

<li onclick="splitID('LI_31')" id="LI_31" title="Click Bullet to Expand"><a href="www.somePage31.com">Second Level Link 31</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage311.com">Third Level Link311</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage312.com">Third Level Link312</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage313.com">Third Level Link313</a></li>

</ul>

<li onclick="splitID('LI_32')" id="LI_32" title="Click Bullet to Expand"><a href="www.somePage32.com">Second Level Link 32</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage321.com">Third Level Link321</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage322.com">Third Level Link322</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage323.com">Third Level Link323</a></li>

</ul>

<li onclick="splitID('LI_33')" id="LI_33" title="Click Bullet to Expand"><a href="www.somePage33.com">Second Level Link 33</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage331.com">Third Level Link331</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage332.com">Third Level Link332</a></li>

<li onclick="timesToIgnore = 2"><a href="www.somePage333.com">Third Level Link333</a></li>

</ul>

</div>

We take a break here and continue in the next part of the series.

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.