Collapsable Folder Lists
I hate javascript - I really do. It’s a messy, convoluted, and cryptic scripting language whose sole purpose in life (in my humble opinion) is to make my code as messy, convoluted, and, well, cryptic as possible! Doggone it, though, if it isn’t just too stink’n useful!
I use it all OVER the place… to position my cursor in the login box at page load (not having such code on a web page is a sin in my, again, humble opinion), hide lists, create pop-up menus, highlight words and rows, pop-up confirmation boxes… it’s a jewel! I can create a truly interactive website with this gift of javascript!
But there’s that whole “messy, convoluted, cryptic” business that really bugs me. Which brings me to the world of collapsable lists (and as far as that goes - drop down menus). I wanted to create a collapsable list that had no - that’s right - NO javascript in it at all (at least from the HTML perspective). Sound crazy? Well, not anymore…
I scoured the net looking for two things: A pure-CSS collapsable list and a pure-CSS drop down menu. Well, I found the menu, but they use the “hover” feature in CSS. That’s great and all, but if I didn’t click it, I don’t want… I hate it when I’m moving my mouse down a webpage to get something and get a stupid menu popping up RIGHT OVER where I was going. So, I started looking for a way to convert those multi-level, pure-CSS menus to a click-based activation. I haven’t achieved, yet, but I created another little gem in the process:
A pure-CSS collapsable list.
Well, I may have tainted the CSS a bit with javascript, but I don’t have to program a lick of the stuff in my HTML. All I have to do is create an unordered list (UL) and make sure I have the appropriate classes in them, and the rest is done for me! Dig it…
I’ll being putting up a page on how I did it in a couple of days as I get time…