
Pure CSS collapsible tree menu - daylen
http://www.thecssninja.com/css/css-tree-menu
======
mcantor
What's with all of these CSS posts that don't have an example of what it looks
like right up top, much less hidden behind a link? The _first_ thing I want to
know about any CSS technique is how it looks.

~~~
joe_the_user
The technique is broken for half the browsers so he wanted to warn people
first.

But that does make CSS cleverness seem unappealing given that even the
"showcases" are broken.

~~~
ahrjay
I would be interested to know which browsers it's broken in? IE8 and below
don't support the :checked pseudo-class, the fallback is to show the list
fully expanded. Otherwise the browser support is quite broad.

------
joshfraser
I do hate the tendency for people to write massive plugins to implement what
is fairly simple functionality. I wrote my own collapsible menu a few months
ago. It uses a little jquery, but all the code is pretty simple. To me it's a
good example that sometimes it makes more sense to role your own solution than
to drop in someone else's 30kb plugin. Here's the link for anyone who is
interested in checking it out: <http://www.onlineaspect.com/2010/05/01/simple-
jquery_menu/>

~~~
Xurinos
The irony for me is that the author's demo worked for me, and yours did not. I
used Firefox 3.6 for the test, and I instructed NoScript to let your demo work
(but not allow anything on the author's site).

~~~
joshfraser
Weird. I just tested it again in FF 3.6 and it works fine for me.

~~~
Xurinos
Firebug reports this error: "missing } after function body"

jquery_menu (line 1):
("li").addClass("selected").parent().p...).addClass("selected"); }); });

My FF is in Windows at the moment; it would be weird if that was the real
difference.

I wonder if it has to do with the use of C++-style comments on unbroken lines?
The HTML is pretty fairly unreadable on my side, as if someone joined most of
the lines together, both in linux (I did a wget on your link) and Windows. As
a result, I think some of those braces are on the same line as a // comment.

~~~
joshfraser
ah, that sounds like a problem with the code that compresses the HTML and
JavaScript on my blog. it's currently being A/B tested which explains why it
worked for me, but not you. thanks for the heads up. i'll get it fixed. my
actual example should work fine, it's just being broken by the post-
processing.

------
jamesrom
One of the main ideas behind CSS was to move style and design away from
content.

While this is a clever trick, it pollutes your CSS with application logic that
should be separated from your design.

\- HTML for content and markup

\- CSS for design and style

\- JavaScript for client application logic

~~~
catshirt
separation of style, logic, and content is virtuous- but your qualifications
for "style" seems to be demanding and/or arbitrary. is hiding all unordered
lists after an unchecked checkbox not a style?

additionally, styling by attribute is hardly a different than styling by
class. it just so happens that this attribute is dynamic. the actual _logic_
that's taking place here is not in the css; it is inherently handled by the
browser.

------
catshirt
never thought about using a checkbox as a javascript-free stateful mechanism.
great idea.

------
ck2
That is some very clever code and it definitely works with javascript
disabled.

