Sent by Alex Robinson on 28 November 2003 19:07
Hello css-d peeps
My apologies if this email is verbose and swerves all over the place...
I'm looking at that favourite css pattern of the moment - navigation
menu as unordered list. All well and good. However I want to nest any
further levels of navigation to ensure semantic and non-css display
goodness. And I want to be able to stack the menus vertically or
horizontally [0]. Which is where things start getting funky.
>>>>>
menu 1 | menu 2 | menu 3 | menu 4
submenu A | submenu B | submenu C | submenu D
<<<<<
I'm aware of these two most excellent resources:
Patrick Griffith's extended riff on Doug Bowman's Sliding Doors
http://www.alistapart.com/articles/dropdowns/
Kalsey Consulting's CSS tabs
http://www.kalsey.com/tools/csstabs/
(If I've missed others which are the answer to my prayers, well
that's fine and dandy - let me know and just pretend the rest of this
mail never happened)
However, although they're great for situations where pixel-precise
layout is tolerated or called for (and in the case of Kalsey's, that
someone doesn't alter the font settings), I'm looking for solutions
that allow liquidity. I've been bashing around variants of these:
http://www.fu2k.org/alex/css/cssjunk/NestedSubmenu.html
This work fine in "decent modern" browsers (ok, I haven't looked at
it in Opera) but Explorers on both Mac and PC require the submenu to
be moved by an unpredictable amount to the left since the submenu
starts from where its parent list item is located.
http://www.fu2k.org/alex/css/cssjunk/NestedSubmenuKalsey.html
I just got too tired of understanding the quirks here so I gave up -
but maybe the seeds for a solution are there.
So I went back to first principles and bashed this out
http://www.fu2k.org/alex/css/cssjunk/NestedSubmenuAbs.html
It's so nearly there. However, there are still problems.
Explorer (pc and mac) still needs a bit of a helping hand.
Fortunately, it's only a vertical shift and ems can be used
* html ul#primary ul
{
right: 0;
top: auto;
margin-top: 1.2em;
}
but I'd rather avoid it altogether if possible. Liquid should mean
liquid, not "oh and throw in an arbitrary measurement as well". And
god knows why that right:0 works.
The second problem is that IE (pc) misplaces the submenu if it's
displayed from the get-go rather than "simply" being revealed by
Patrick Griffith's DOM-busting script. I'm sure this must be just an
obvious mistake on my part, but I can't see it. Here's an amended
version of the page (li.selected ul is added to the declaration for
li:hover ul and li.over ul) Once you mouseover the submenu or menu,
the submenu shifts to its rightful place.
http://www.fu2k.org/alex/css/cssjunk/NestedSubmenuAbsShowing.html
This led me to then create this
http://www.fu2k.org/alex/css/cssjunk/NestedSubmenuAbsDuplicated.html
which gets round the misplacement issue (and also the z-index
ordering problem), but only by duplicating the current submenu after
(ie not nested) the menu list. Which seems cack.
That's it. Help me Obi-CSS-D.
Now that the main show is done, anyone got any ideas about about how
to use the very same nested list structure to achieve the following?
I'm just curious.
| menu 1 | menu 2 | menu 3 | menu 4
-----------|------------------------------------------
submenu A |
submenu B |
submenu C |
On a tangential, but it's occurring here so I might as well mention
it, note, and no doubt this has been covered before, but I not that
only Moz-based browsers seem to be able to change z-index order
dynamically based on pseudo-properties. Are there any fixes for this?
And sometimes Links in Safari jump around, sometime text in
Camino/Firebird. But never the same way in both. This sort of
behaviour of course is endemic in Internet Explorer on the Mac too.
Anyone catalogued, or know of someone who has, the conditions that
trigger these mini-bugs.maxi-irritations?
And relax...
[0] I'm in the midst of a fairly big redesign and as is traditional I
want to do things right and proper. Moreover, the code I'm working on
will also act as the basis for a multitude of other sites running on
the same back end, but which can be styled up pretty much zen
garden-stylee. Sometimes pixel-precise, sometimes liquid, sometimes
with image-replacement, sometimes with just styled text. So I'm
currently trying to come up with as lean and mean and semantic as
possible a layout as I can. But before I leap, I'm making very very
sure of the ramifications of what I'm about to do.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/