In the summertime of 2003, whereas redesigning the College of Lethbridge School of Administration web site, I reworked our web site map utilizing the practices I’d discovered whereas finding out net requirements and associated points. Because of this, the location map became a nested set of unpolluted, streamlined, semantic unordered lists.
Article Continues Under
When you’ve got a web site that implements concepts from a number of the finest design minds on the internet, you need to have a web site map that provides higher visible cues than a bulleted listing. As I began to learn articles like Dan Cederholm’s Mountaintop Corners and Icon Styled Headings, David Miller’s Zebra Tables and Mark Newhouse’s Taming Lists, I knew there have been easy methods to spruce up sure components of our web site — and that our web site map deserved some consideration.
The factor I wished most was a approach to illustrate the location map’s parent-child relationships extra clearly than the unstyled lists did. I made a decision that probably the most logical and intuitive approach to characterize this relationship could be to point out mum or dad components as folders and little one components as recordsdata, and with this in thoughts, I attacked the markup.
The very first thing I did was to distinguish between the unordered lists on the location map and all different unordered lists on the web site by including a category to the mum or dad unordered lists.
<ul class="sitemap">
<li>
<a href="https://alistapart.com/section1/" rel="nofollow">Part 1</a>
</li>
<li>
<a href="http://alistapart.com/section2/" rel="nofollow">Part 2</a>
<ul>
<li>
<a href="http://alistapart.com/section2/page1.html" rel="nofollow">Web page 1</a>
</li>
<li>
<a href="http://alistapart.com/section2/page2.html" rel="nofollow">Web page 2</a>
</li>
<li>
<a href="http://alistapart.com/section2/page3.html" rel="nofollow">Web page 3</a>
</li>
<li>
<a href="http://alistapart.com/section2/page4.shtml" rel="nofollow">Web page 4</a>
</li>
</ul>
</li>
<li>
<a href="http://alistapart.com/section3/" rel="nofollow">Part 3</a>
</li>
</ul>
Now that the HTML was the place I wished it, I targeted on the CSS. Step one was shifting the listing bullets. I additionally modified the padding and margin on the left-hand aspect to customise the indentation of the lists on the web page.
ul.sitemap {
list-style-type: none;
margin-left: 0.5cm;
padding-left: 0;
}ul.sitemap li {
padding-left: 1.1em;
}
The following step was harder. I knew that I wished to make use of Dan Cederholm’s icon-styled headings to introduce the icons with out having so as to add tags to the HTML code. What I didn’t know was which components I might use as “hooks” for Dan’s approach.
I initially assumed I may connect the icons to the <li> components, however then it hit me that then the mum or dad listing objects would show the doc icons in addition to the folder icons. So I made a decision so as to add the code to the listing’s anchor tag model.
ul.sitemap li a {
background: clear »
url('sitemapdocbullet.gif') no-repeat;
margin-left: -1.1em;
padding-left: 1em;
}
This identifies the icon and adjusts the padding and margin to indent the nested listing and supply house between the icon and the listing merchandise.
The mum or dad listing components, nonetheless, had been nonetheless unstyled. Once more, I couldn’t merely model the listing objects, as a result of then all listing objects (together with those with the doc icons) would show folder icons. Since I had no different tags with the mum or dad listing objects, I didn’t suppose there could be something to which I may hook this new code.
It hit me whereas I used to be within the bathe one morning. “What concerning the nested
- aspect?” I may apply the model there, after which modify the margins and padding to place the icon subsequent to its mum or dad aspect.
ul.sitemap li ul {
background: clear »
url('sitemapfolderbullet.gif') no-repeat;
list-style-type: none;
margin: -1.4em 0 0 -1.6em;
padding: 1.4em 0 0 0.6em;
}
Voilà!
One other situation that arose was discovering a clear approach to make every mum or dad listing merchandise a hyperlink — once more, the duplicate icon situation got here up. I received a headache looking for a method round it, however since I didn’t need to resort to scripting, I needed to introduce an additional class on the mum or dad merchandise.
This made the code appear to be the next:
<ul class="sitemap">
<li>
<a href="https://alistapart.com/section1/" rel="nofollow">Part 1</a>
</li>
<li>
<a category="mum or dad" href="http://alistapart.com/section2/" rel="nofollow"><span class="linewrap">»</span>
Part 2</a>
<ul>
<li>
<a href="http://alistapart.com/section2/page1.html" rel="nofollow">Web page 1</a>
</li>
<li>
<a href="http://alistapart.com/section2/page2.html" rel="nofollow">Web page 2</a>
</li>
<li>
<a href="http://alistapart.com/section2/page3.html" rel="nofollow">Web page 3</a>
</li>
<li>
<a href="http://alistapart.com/section2/page4.shtml" rel="nofollow">Web page 4</a>
</li>
</ul>
</li>
<li>
<a href="http://alistapart.com/section3/" rel="nofollow">Part 3</a>
</li>
</ul>
I then added the next rule to my CSS file:
ul.sitemap li a.mum or dad {
background: clear »
url(none) no-repeat;
}
With all that out of the best way, I simply needed to contact up the nested listing objects a tad and I used to be good to go.
ul.sitemap li ul li {
margin-left: 0.5cm;
padding-left: 10px;
}
And there it was. The primary instance I ever come throughout of an icon-styled unordered listing made solely with CSS.
You possibly can see it at work at College of Lethbridge School of Administration web site.
