Here’s another utility stylesheet for you: hnav_floated.css.
This isn’t a complex stylesheet, but it’s something I can share with you now so I figured I would.
Basically, it takes an unordered list and transforms it to a horizontal menu/list. So what’s the big deal, my previous hnav.css already does that.
Well, as I work on this new layout, I want to do CSS-based drop-down menus from a horizontal menu. The problem with any CSS-based drop-down menu is that you need to make sure the drop-down menu is either overlapping or immediately next to the menu item that triggers the drop-down. If there is even 1 pixel of space between the two, when your mouse moves over that 1px gap, the drop-down will disappear because of the loss of focus (loss of :hover state).
So positioning that drop-down menu is key.
Drop downs triggered from an inline element (which is what I use in hnav.css.) are not consistently positioned relative to the parent (:hover triggered) element across browser platforms.
As a result, I need to turn those inline elements into block elements. The way to do that and still keep the menu items on a single line is to use floats.
This is what hnav_floated.css does. It floats the list items to create a horizontal menu. It’s a far less complex stylesheet, but requires a little more HTML markup.
I’m working on a utlity stylesheet for CSS-based drop-down menus as well. I want it to be fairly comprehensive with several styles that can be used to determine where a drop-down menu pops relative to the parent element. (straight down, down and to the left, down and to the right, maybe more).
I keep calling the drop-down menus “pops” in my own head, because they are more pop-ups than drop-downs (at least in my head).
How do you differentiate between pop-ups and drop-downs?