Designing with Nested HTML Lists - Building a nested HTML list with multiple sub-levels
(Page 4 of 4 )
In the section that you just read, I explained how to build a nested HTML list comprised of multiple sub lists with one level of depth. Nonetheless, as you might have guessed, it's possible to expand the list's hierarchical structure and incorporate more sub-levels with minor effort.
Bearing in mind this concept, below I coded a brand new example that shows how to construct a nested list that is also "nested within another." Does that sound a bit confusing? Don't worry; the following code sample should dissipate any doubts that you might have on this topic:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building multiple nested HTML lists</title>
</head>
<body>
<h1>Example on building multiple nested HTML lists</h1>
<ul>
<li>List Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 2
<ul>
<li>Sub Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</body>
</html>
Even though at first sight the structure of the above nested HTML list seems to be quite complex, the truth is that it's fairly simple. In this specific case, an additional sub level has been incorporated into the second sub list, which expands its hierarchy even more -- but this apparently complicated process is reduced to appending as many child lists as needed. That's all.
Finally, the following screen capture should give you a more clear idea of how the nested HTML list created a few lines before is displayed on the screen:
And with this concluding hands-on example, I'm finishing this introductory chapter on building nested HTML lists. As usual, feel free to edit all of the code samples developed in this tutorial, so you can get a more solid background in creating these useful web page elements.
Final thoughts
In this first episode of the series, I walked through the basics of building nested HTML lists. As you saw before, this process is pretty straightforward and doesn't offer major difficulties, even if you're just getting started using lists within your own web sites.
In the forthcoming article, I'll be discussing how to improve the visual appearance of nested lists by using a few simple CSS styles. Thus, now that you've been warned about the topics that will be covered in the next tutorial, you don't have any excuses to miss it!
| 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. |
