The tiling background image for the divider rows does not contradict resizing (at least should not, with sane CSS renderers).
Williham Totland
2009-07-13 16:47:39
A:
I think he's saying on a text-only zoom, the effect will break because the image will not scale. Page zoom will show no issues though, of course.
jonwd7
2009-07-14 10:25:49
A:
This is pretty sloppy for my tastes, but basically it requires text-indent instead of padding or margin to achieve the nesting. But then to use a sprite image as the bullet for the <a>, you have to end up taking the current text-indent for the level and bump the sprite image over that many px, minus the sprite image width.
I've changed it to use padding-left on the anchor instead, but then this requires overflow: hidden on the parent div to hide the extra border that gets pushed to the right with each nesting.
And of course, visualize any of the stuff like .two_deep, .expanded, etc. as being done with jQuery, and NOT hardcoded into the CSS. It should be fairly simple to get a ul's depth in the menu.
<html>
<head>
<style>
body {font: normal 11px Arial;}
a:link, a:visited {color: #888; text-decoration: none;}
a:hover, a:active {color: #000; text-decoration: none;}
div {width: 250px; border-top: 1px solid #888; overflow: hidden;}
ul {
width: 100%;
margin: 0; padding: 0;
list-style-type: none;
}
li {
padding: 5px 0;
border-bottom: 1px solid #888;
}
li a {
display: block;
}
.two_deep li a {
padding-left: 25px;
}
.three_deep li a {
padding-left: 50px;
}
.four_deep li a {
padding-left: 75px;
}
.expanded {
display: block;
width: 100%;
border-bottom: 1px solid #888;
margin: -5px 0 5px;
padding: 5px 0;
}
li > ul {margin: -5px 0 -6px;}
</style>
</head>
<body>
<div>
<ul>
<li><a class="expanded" href="#">First Link</a>
<ul class="two_deep">
<li><a href="#">Child One</a></li>
<li>
<a class="expanded" href="#">Child Two</a>
<ul class="three_deep">
<li>
<a class="expanded" href="#">Child One of Child Two</a>
<ul class="four_deep">
<li><a href="#">Child One of . . .</a></li>
<li><a href="#">Child Two of . . .</a></li>
</ul>
</li>
<li><a href="#">Child Two of Child Two</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>
</div>
</body>
</html>
But honestly, maybe you would rather just use a background image, and have it look ugly/broken when text is resized. The css is a bit 'hack-y' for my tastes, especially all the padding compensation needed due to the anchor and li having to be siblings.
I've tested this in Firefox 3.5, Safari 4, and Opera 9.6. I don't have access to anything else at the moment, so it's probably not even very pretty.
Needless to say it's probably a complete wreck in all IE versions. Sorry… It was just my own little test to see if I was up to the task!
Edit: It DOES work with page zoom and text resize, but again, IE support (?)…
jonwd7
2009-07-14 10:52:43
+1
A:
You need to have the border and padding on the <a> which also must be set to display:block. This gives an added bonus as it makes the whole <li> region clickable.
There is no extra markup needed in the ul. Just define the max number of sublists in your css.
a {text-decoration:none;}
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;}
ul ul, ul ul ul {border-top:0;}
li a {border-bottom:1px solid #000;display:block;padding-left:0px;}
li li a {padding-left:40px;}
li li li a {padding-left:80px;}
<ul>
<li><a href="#">First Link</a>
<ul>
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a>
<ul>
<li><a href="#">Child Two One</a></li>
<li><a href="#">Child Two Two</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>
Emily
2009-07-14 11:08:00