Dragonfly Eesti

Stumbled over this page by Jakob Nielsen - the guru on interface design IMHO - http://www.useit.com/alertbox/mega-dropdown-menus.html

His 'Designing Web Usability' book is well worth a read if you haven't already.

The first example especially would be a huge improvement over current DF menus. It is just so easy to drift your mouse off the existing menu tree and have to start over. The CSS changes I'm sure you could handle, if so inclined. But I don't know what changes might be needed in cpgmm php to handle a (often needed) 3rd menu level. Although the basic code must be present as an additional level is already supported on the Admin side of cpgmm menu.

What do you think of this Madis?

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1

Giving a quick response saying 3rd level is quite impossible as Dragonfly core doesn't support it.

Reading further your post now...

EDIT: OK now...
I've encountered these "mega"-dropdown menus itself and thought about them before. Taking this site here as an example, the multi column menu list isn't needed, as 8 items is the max here (except administration, though).

I prefer that when hovering the menu item the submenu immediately appears, not after half a second, but this might vary for different people.

I would prefer if the menu wouldn't close immediately though. That would require some javascripting, anyone interested can help out.

Madis's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/2.0.63/5.0.67/5.2.5/9.2.1

If you are using latest Google Chrome or Opera 9.5 beta you can see the slight delay on closing and opening menu.

Madis's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/2.0.63/5.0.67/5.2.5/9.2.1

OK, I've done the hard bit!

So now I need your help with the very hard bit!

First of all I thought it was too hard to add a 3rd level to the menu. Then I realised that for mega drop down menus we don't need a 3rd (or more correctly a new 2nd) level menu. We just need a label. (I called it a label becuase it is like a label in HTML drop down).

That seemed a lot easier, so I went for it. In the end I was able to support an additional level of links as well, so we have true 3 level menus available! But the label approach did make the changes easier though, because I approached it as adding a 2nd level - dropping the existing 2nd down to the 3rd level. Doing it the other way - adding a 3rd level - would have been way too hard, and way too disruptive to the code.

The changes are very well contained, and clean. A new SQL table cms_modules_lbl, fairly localised changes to admin/modules/cpgmm.php, updates to cpgmm_edit.html for new label, trivial edits to cpgmm.html to call it, plus a few additions of course to language/english/cpgmm.php. Changes to user side are even simpler: replace the SELECT call in cssmainmenu.php with a SELECT UNION, plus adding an if statement to output a link-free entry, plus a new label style in cpgmm.css.

It is so clean, that IMHO it could be added to core without much work I believe. But let's not run before we can walk.

Attached see an image of Admin > cpgmm showing 2 labels, and another of the user menu showing the non-linking label. I've only attempted (very limited) CSS support in default theme.

So I'm pleased with my PHP work, but not my CSS Currently I've lashed up the following CSS addition, but it uses a div instead of a span, so likely will only work in FF. Any chance of your assistance in making this look right in default and/or reDesign3, please?

I'll package the changes (to 9.2.1) and put on my site if you are interested in helping out.

TIA!

---

---

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1

Hi,
Sorry for not getting back earlier.

You could use span and set it's property display:block, if wanted to behave as a div. I assume it's a list element <li> actually, or should be, so a class should be set to it to enable overwriting the values of normal li in css (and that is why it's cascading style sheet, anything can overwrite it's predecessor by being called later in code, with a selector like class, id, :first-child, etc, or having !important tag).


I'm not to fond of core changes, though. Except if they are 'core changes' , but well, Dragonfly isn't overly complex and updates are rare (way too rare, but there's no-one to blame), so it would serve it's purpose well and it seems there are people who want this (@dragonflycms.org forums).


If you have any questions feel free to ask them.
Spock out.

Madis's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/2.0.63/5.0.67/5.2.5/9.2.1

Thanks for the reply.

Yes, it is an li. Understand what the first C in CSS means, after all your specifics.css is a clear and lucid example.

Problem I had was that the contents previously were a href, so when switched to plain text I lost the br effect. But your block display idea is way better than my span -> div - which is why I came here in the first place - so I'll give that a try next week. Along with tackling reDesign3's menus.

I understand and agree with your changing core code concerns, but as you say, some things can't wait until 10 is released. In this case I think the changes are so manageable that I'll likely be able to port them to later versions as needed. Eg. lattest 9.2.3 CVS changes don't affect any of this code so it is promising to be no more than a simple merge (assuming I can ever upgrade to 9.2.3!).

Thanks!

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1

Got it working ok with default, and then moved on to the important one: reDesign3

Wouldn't work initially, then I discovered - somewhat ironically based on earlier conversation - that reDesign3 replaces cssmainmenu.php under themes!

So ... this means that only change to DF core for rD3 is a trivial addition to admin/modules/cpgmm* to allow the new label type to be added/edited (basically a duplication of the existing code with different db filename). And those 2 files haven't changed in 3 years.

It turned out to be a bit more complicated in rD3 version of cssmainmenu due to your "dynamically assigned" CSS class trick. Neat trick though! But it now works - as shown below. I've also modded block-Current_Menu.php and that works with one proviso: if you create one of these new labels with a link (not really recommended) then it will be formatted in CSS as a normal link, not a label - because I can't tell it apart from a normal link.

Now I still want to do the double column display like the examples in the OP, but that will be some work. As I won't know how many links each label has, I planned to add a class attribute of 'even' (like your 'first') to identify links to float right. But as the link has to be left aligned in the 2nd column, I guess I'm going to need add a new div around the entire link entry, and mark that one as 'even'. Then put a row around each left/right pair, plus something to bridge the row if last one. Etc. And finally a generous border so that you are less apt to "lose" the entire pull-down by slipping off the edge...

---

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1

Glad you got it working and read through the mess of reDesign's cssmainmenu.php

Madis's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/2.0.63/5.0.67/5.2.5/9.2.1

Finally... got around to adding 2-column support for reDesign3. See my website for details and the download.

User side only. Admin menus unaffected ( that was the hard part! )

---

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1

Cool. Thanks for the effort, layingback.

Here's the download link: layingback.net/Downloa...id=66.html

Madis's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux/2.0.63/5.0.67/5.2.5/9.2.1

Thanks.

BTW, if anyone wants 3 columns, it is simply a case of changing the menu width as necessary in the included specific.css.txt, and then replace the few occurrences of 50% with 33% in the same file.

I wanted to add an almost transparent border to the submenu, giving it a "laminated badge" look. As this provides a "buffer" area to reduce risk of moving off of the submenu, and it shutting on you.

Found out how to do in standard case, but in a 2-column version you are left with the void if there are an odd numbers of link entries. Addressing that was too disruptive - at least with any method that I could come up with (described in previous post).

---

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1

Upgraded reDesign from CVS - I hadn't realised there were so many small improvements. But it showed up a shortcoming in my hack! Took me a long time to find it!

Anyway, new version on my site. Plus I have enabled links on these new label entries. Probably bad for the user experience in the general case, but someone might need.

I still can't get a clear border - without breaking a lot of the CSS - but your rounded corners and drop shadow really look good.

Here's a latest image.

---

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
L:U8.1/A:2.2.8/M:5.0.51a/P5.2.5/D:9.2.1