Bulleted Menu of Links - Even More Code
(Page 5 of 5 )
//form the string
if (SLL11Direction == "Expand")
{
string11 = "<li onclick="formString('SLL11')" id="SLLLI11" style='list-style-type: circle'
title="Click Bullet to Collapse"><a href='www.somePage11.com' id="SLL11" title='Click Bullet to Expand'>Second Level Link 11</a></li>";
string11 = string11 + "<ul id='SLUL11'>"+ string111 + string112 + string113 + "</ul>";
}
else
{
string11 = "<li onclick="formString('SLL11')" id="SLLLI11" style='list-style-type: disc'
title="Click Bullet to Expand"><a href='www.somePage11.com' id="SLL11" title='Click Bullet to Expand'>Second Level Link 11</a></li>";
}
if (SLL12Direction == "Expand")
{
string12 = "<li onclick="formString('SLL12')" id="SLLLI12" style='list-style-type: circle'
title="Click Bullet to Collapse"><a href='www.somePage12.com' id="SLL12" title='Click Bullet to Expand'>Second Level Link 12</a></li>";
string12 = string12 + "<ul id='SLUL12'>"+ string121 + string122 + string123 + "</ul>";
}
else
{
string12 = "<li onclick="formString('SLL12')" id="SLLLI12" style='list-style-type: disc'
title="Click Bullet to Expand"><a href='www.somePage12.com' id="SLL12" title='Click Bullet to Expand'>Second Level Link 12</a></li>";
}
if (SLL13Direction == "Expand")
{
string13 = "<li onclick="formString('SLL13')" id="SLLLI13" style='list-style-type: circle'
title="Click Bullet to Collapse"><a href='www.somePage13.com' id="SLL13" title='Click Bullet to Expand'>Second Level Link 13</a></li>";
string13 = string13 + "<ul id='SLUL13'>"+ string131 + string132 + string133 + "</ul>";
}
else
{
string13 = "<li onclick="formString('SLL13')" id="SLLLI13" style='list-style-type: disc'
title="Click Bullet to Expand"><a href='www.somePage13.com' id="SLL13" title='Click Bullet to Expand'>Second Level Link 13</a></li>";
}
if (FLL1Direction == "Expand")
{
string1 = "<li onclick="formString('FLL1')" id="FLLLI1" style='list-style-type: circle' title="Click Bullet to Collapse"><a href='www.somePage1.com' id="FLL1" title='Click Bullet to Expand'>First Level Link 1</a></li>";
string1 = string1 + "<ul id='SLUL1'>"+ string11 + string12 + string13 + "</ul>";
}
else
{
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='DoubleClick to Expand'>First Level Link 1</a></li>";
FLL1Direction = "";
SLL11Direction = "";
SLL12Direction = "";
SLL13Direction = "";
}
//combine the first level global strings
var completeString = "<ul>" + string1 + string2 + string3 + "</ul>";
//give the table cell its new link arrangement
document.getElementById("TDL").innerHTML = completeString;
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td id="TDL">
<ul style="list-style-type: disc" id="FLUL">
<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. |
