Pure CSS collapsible tree menu | Hacker News Reader

Pure CSS collapsible tree menu

thecssninja.com

34 pointsdaylen17 comments

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.

Probably to keep them from being broken by the styling on the article's page, which could change in unknown ways at any given time in the future.

Better to keep the example on its own independent page.

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.

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.

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/

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).

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

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.

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.

I do hate when people don't even bother to read the article.

It's 1.5kb of CSS that doesn't require any javascript.

I agree with this 100%.

I understand that people want something they can put together quickly, so they find a script that does it and they figure out how to integrate it... but I've learned that it actually takes more time to do all that than write my own little script that does exactly what I'm looking for with less code... and it's optimized for the particular code it works with (for which it works for you grammar-whores ;)).

Not to mention, I've learned way more by doing it myself and in the long run I progress faster... all while writing more efficient code.

And for this very same reason, I don't use jQuery or any other libraries... the majority of them are way too bloated for what I need (most of the time). Exceptions include server-side libraries for graphing, reading/writing from/to excel, etc.

What do you use to I/F with Excel files?

PHPExcel: http://phpexcel.codeplex.com/

If you're using other server-side languages I'm sure a search engine query or two will return decent results... don't go straight for the first one though. Check a few out and see what suits you best.

I will say though that PHPExcel has never failed me.

And I just noticed the version I'm using is out of date too... thanks! Gonna [try to] get it up to date now. :)

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

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.

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

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

Reply on news.ycombinator.com