Comments on: Pure CSS collapsible tree menu

By: Wayne B

Wayne B — Sat, 21 Jan 2012 04:46:38 +0000

I use it as an index in the Archive section of my photo blog. This is perfect. Absolutely perfect. Thanks Css Ninja! And, it validates Strict, too! Just ideal for my site!

By: Erin

Erin — Sat, 31 Dec 2011 00:22:55 +0000

Love the tree!

I can’t get the selectivizr to work, though. I’ll admit I’m a total newbie, so I think the problem is simply that I don’t know how to correctly enter the reference to the javascript library or how to make sure Dreamweaver CS5 has one, or…

So I’m sure it’s a really stupid question, but how do I find currently existing javascript libraries, and how do I tell the script/page to reference them?

Thanks!

By: Jag

Jag — Tue, 15 Nov 2011 21:23:30 +0000

I used to use “joust” in my old days in school… but I find your solution very very impressive. I’m a HW guy and NOT a SW guy at all. So, I have a very silly question, basically I want the tree to stick to the left side of the page, and my files to show up on right side, …

This is probably as per previous query by one of the users…

@Zeus
Just reduce the padding on the label and remove the background reference. Same for the links.

Can you please provide an example of this? Where do I reduce “padding” and remove “background reference”?

I’m again sorry for silly question…

By: mehran

mehran — Tue, 15 Nov 2011 09:54:41 +0000

Thanks Ninja, that’s goooood

By: Ryan Seddon

Ryan Seddon — Wed, 09 Nov 2011 02:12:02 +0000

@Andy –

That’s a very good point I could just use display: none/block over height I’m not sure why I did it originally, but I’ve updated the demo to use that. This also fixes the issue for keyboard navigation. They’re now hidden so you can’t tab to hidden elements unless they’re a visible so it works much more logically now.

Cheers!

By: Andy from Workshopshed

Andy from Workshopshed — Tue, 08 Nov 2011 10:24:06 +0000

Just tried navigating using just the keyboard, tabbing and using space to toggle the checkboxes works but you can tab to items that are not visible.

By: Andy from Workshopshed

Andy from Workshopshed — Tue, 08 Nov 2011 10:19:21 +0000

Ryan, I’m not an expert on screen readers, the chap who was giving a talk said he tested your menu with NVDA and the zero height rows were indeed not read by that reader. Is there a reason why you use zero height and not hidden?

By: gkr

gkr — Sun, 06 Nov 2011 06:08:00 +0000

excellent post

Can i spread this post in blogger blog giving a backlink to your post.

By: Eric

Eric — Fri, 04 Nov 2011 23:42:23 +0000

Wow, I was thinking this one was with a little bit of javascript but you’ve impressed me!
It’s truely pure CSS, very nice work.

By: Ryan Seddon

Ryan Seddon — Sun, 30 Oct 2011 22:20:59 +0000

@Patrick –

If you have two versions on the one page you shouldn’t have to change anything, other than making sure the 2nd version doesn’t share any of the same id values as the first otherwise it’ll intefere with how the the checkboxes work.