Table-based menus for Nice Menus (with code!)

The smartass answer to that is "nothing works in IE6". But if you can figure out what needs to be fixed to get it to work, I'm happy to incorporate it!

I just put up a live test site using tabled menus, http://test.animeigo.com/

Check it out and tell me what you think. One tweak since my last code post is that it also handles 2 level deep menus as well as 3 level deep ones. And you can use simple CSS to either line up the table under the tab, or left/right justify it, which is handy in the case of wide tables (like the Liner Notes one on my site)

Once it has been beaten on a bit and I've taken the site to full production status, I'll clean things up and post a patch vs. the current dev version.

In the meantime here's my latest version and the .css file I use on the above site. Happy non-denominational gift-getting day!

I would expect you would have to do that with css. As I understand it, the nice_menus module just takes the output of the menu system (a structure of names and urls) and restructures it; my tweak just provides an extra layout of tables.

But you can certainly use CSS to replace text links with images; I do this on test.animeigo.com with the main header tabs. Each menu item has an ID you can refer to, so you can customize things. For example, in the Products listing on the site, you'll notice that the "T-shirts and Character goods" menu item has a blank line above it, that's done by tweaking the layout of that particular item.

Actually, while writing this reply, I noticed that the level 2 td's in the structure have CSS class "nice-menu-level2-row" when they should be "nice-menu-level2-col"... taptaptap... that's fixed.

OK, here is a patch against the current release version -- the dev version has a lot of internal rearrangement and plugging things in would best be done by add1sun, since he understands his code [and drupal] better than I. If he specifically asks, I'll take a stab at it though.

Also a complete archive of the modified release version, including the changes mentioned in #5 above. I also added some additional comments to better explain the table generation logic.

Some user documentation on how the menus are laid out.

The primary (level 0) menus are in lis, which contain a table

If *all* of the level 1 menus are childless, they are in spans contained in a single tr td. If one or more of them have children, each span is inside its own th.

Level 2 menus are spans inside a td in a second tr.

Or graphically:

LI
  level-0 A
  TABLE
    TR
      TD
        CHILDLESS level-1 SPAN + A
      /TD
    /TR
  /TABLE
/LI

LI
  level-0 A
  TABLE
    TR
      TH (one or more)
        level-1 SPAN + A
      /TH
    /TR
    TR
      TH (same # as above)
        level-2 SPAN + A (multiple)
      /TH
    /TR
  /TABLE
/LI

There are numerous classes and ids defined to make customization easier (including ids that make it easy to refer to related level 1 and 2 tds). I find using Safari's "inspect element" option very useful in understanding these kind of structures.

Hmmm...

Since the root level element is just a UL with LI's containing tables, I don't see why you couldn't implement that style just by tweaking the CSS. I don't have a need for that kind of CSS but if you want to come up with some and post it, I'm sure it would be useful to others.

Or am I missing something?

If you are talking about my original code, there are attachments that contain it earlier in the thread.

I have tested it and it works with Internet Exploder 7 and 8, Opera, Safari (desktop and iPhone) and Firefox.

IE 6 is, of course, a lost cause.

That would be done with CSS positioning. If you're trying to do something similar to guillem, I suggest you look at the CSS on his site for some tips.

The first thing you need to do is get a good CSS book; I would suggest "CSS: The Definitive Guide". If you're going to do any sort of serious drupal theming you need to be up to speed on CSS.

The second is you need to know that absolute is relative to the containing block. What you want is position: fixed, which is relative to the window viewport.

position: fixed allows you to position relative to the viewport (ie: absolute positions on the webpage).

The initial position of the block is wherever it would have been placed anyway. So to move it, you need to specify both a left: and a top: (for example).

However, you have to make sure that the various components touch each other, so you can move from one to the other without the hover failing.

CSS can be very tricky. I always have a copy of "CSS: The Definitive Guide" from O'Reilly nearby.

Take a look at the html and css output on http://www.animeigo.com/, it does multi-column dropdowns.

Basically, your toplevel menu items are tabs that trigger dropdowns, the level-2 menus are column headings, and the level-3 menus go in columns. Table-based menus can't nest deeper than three levels.

So your menu structure (to drupal) looks like this:

Tab Menu
-- Column Header Menu
---- Menu
---- Menu
---- Menu
-- Column Header Menu
---- Menu
---- Menu
---- Menu

and so on.

If a Tab Menu has only 1 level of menus under it, they are displayed as a column with no header.

Nice menus are configured through the block config interface.

In other words, go to /admin/build/block, add a nice menus block to whatever part of the page you want it in (typically the main header), configure it, and select "table" as the style

No problem. That's the whole point of open-source; you run into a problem, you fix it, you post it for the next poor bastard.

I think so, with some clever CSS. The site you link to seems to be displaying things in multi-column format, so I am not quite sure what you are going for, but in my code, if the main link (the "tab", so to speak) that triggers the popup has 2-sublevels of items, the first sublevel are the column headers, and the second sublevel are the column items under them.

If there is only one sublevel, then you just get the column items. The CSS has lots of ids and class names that you can use to lay out stuff the way you want. Or you could just tweak the patch to do exactly what you need.

http://www.animeigo.com/ shows how I use it. If adding some classes to the spans would help (for example, to make it easier to break to a new line every N items), then let me know and I will try and get out another version.

TBH I am stacked with other work right now and IIRC there are significant differences to how it would hook into 6.x-2.x-dev, so if someone else could carry the ball on this, I would be obliged. If not I will see if I can get to it sometime this summer. Is there any deadline on this?

R

I haven't heard anything..