Arbitrary abbreviations in phobos considered ridiculous

[Adam D. Ruppe]

On Tuesday, 13 March 2012 at 05:38:44 UTC, Nick Sabalausky wrote:
> OTOH, I don't like CSS drop-down menus. Maybe it's different in 
> CSS3, but in CSS2 the only way to make CSS menus work is for 
> them
> to open  upon rollover, not click.

Yeah, the way I do it is with a hybrid approach:

menu.onclick = function() { toggleClass(this, "opened"); };

.with-js menu > ul {
    display: none;
    /* or if you want it to roll, use the transition */
}

.with-js menu.open > ul {
    display: block;
}


and there you go. If you ask me, most your javascripts
should be changing classes, not actually doing the
work itself. That way, you keep the clean separation -
the class just represents the current state.

(indeed, with-js is another toggled class; put a little
script in the head that adds it to the html element.)



One downside of the css3 animations though is that
doing it without fixed height kinda sucks.

I wanted a quick foldout of something for the work
site. The simple height: 0px then open means
height: auto didn't work - you can't animate
to height: auto. Which sucks and they should
fix that, but apparently Apple's developers are
too incompetent to implement it in Safari, so
it gets left out of the standard. Or something
like that. I hate the standard, the process is
biased bullshit.


Anyway, to make it work, I ended up doing this:

/* overflow: hidden rox btw, use it a lot, you'll
thank me later */
max-height: 0px; overflow: hidden; transition: max-height 0.2s;

.open { max-height: 20em; }



Which gives the effect.. but the animation is from the
numbers given, not the actual height.

So, if you say max-height: 200em for instance, and
your content is only 20em tall, the visible animation
will complete in 0.02 seconds instead of 0.2!


Thus, I decided to pick an approximately right,
and call the animation time good enough.

The problem is now though: what if you add an item
to the drop down? If you don't remember to adjust
max-height too.... the new thing is just hidden.


Gah, the css is now dependent on the specific
content!



But, you don't always have to do this stuff
(BTW if anyone knows a better technique, let
me know!), and even so, it beats the crap
out of javascript animations.