Hi,

I've attached a patch for the 6.x-3.5 version of the module which adds the option to use the menu item bullets to expand/close the submenus. This isn't a direct backport from the 7.x version and, although this is similar to the issue #117370: Remove DHTML Menu code from Actual Links and Make Bullets The Clickable Element I thought this was worth posting because I've taken a slightly different approach.

Rather than using a nested link which can cause hassles with 'event bubbling', I've used the Jquery 'before' function to add a link for the bullet action before the normal menu item. Since it's a separate tag, it can be moved and themed easily (I haven't tried an RTL theme yet though). The scripting isn't as clever as the dynamic positioning in the 7.x version, but I wanted something simple that themers could use.

Most of the patch is to the JS file, but it also adds a configuration option for the bullets to the admin menu (which, when selected will ignore the options for a 'cloned' link and double-click action since they're no longer needed) and adds a CSS class to the menu 'branches' to make life a bit easier for themers.

There are also some basic styles added to the CSS file to get bullets working, but I've left this pretty minimal, as I assume most people will change this in their theme (especially as IE needs some hand-holding to get things in the right place). In an attempt to keep things a bit accessible, the bullet link has some descriptive link text, which is then hidden using the top-padding/overflow-hidden technique.

Anyway, hope that's useful - it's going to be a while before I get my sites moved to D7!

CommentFileSizeAuthor
#24 bullet-dropdowns-564428-24.patch5.29 KBsamhassell
#13 fix-keep-only-one-menu-open.dhtml_menu.with-bullets-patches.patch663 bytesblogbold
#9 dhtml_menu_3-5_bullets.patch.with-fix-store-expanded-menus.patch5.38 KBblogbold
#8 fix-store-expanded-menus.dhtml_menu.with_.dhtml_menu_3-5_bullets.patch.patch738 bytesblogbold
#4 dhtml_menu_6x_564428.zip14.81 KBmatkeane
dhtml_menu_3-5_bullets.patch5 KBmatkeane

Comments

zmove’s picture

zmove commented

+1000

matkeane’s picture

matkeane commented

Hi,

Glad it's helpful. It needs some work though, as I've noticed some weirdness when the 'Keep only one menu open at a time' option is selected - menus open OK, but then slam shut again! - so I need to look into that.

zmove’s picture

zmove commented

I notice that it's still a pain to apply a patch on windows... It is possible to have the modified .module file ?

matkeane’s picture

matkeane commented
StatusFileSize
new dhtml_menu_6x_564428.zip14.81 KB

Hi,

It's actually some of the supporting files that are modified, so I've attached a zipped version of the whole module folder with the patched files.

zmove’s picture

zmove commented

Thank you very much, with little CSS, it works like a charm.

Just a few things, I noticed that in the javascript file, the label "Toogle" menu is hardcoded. I think it would be great to be able to choose what you cant to display. In my case I display nothing to make a background image, so I had to tweak a little the JS file to remove that label.

Thank you very much.

matkeane’s picture

matkeane commented

Hi,

Glad it's working for you. Yeah, the link text is currently hardcoded in the JS file, but it does go through the Drupal t() function so you can replace the string using the locale module, if you have that enabled. I guess I could add an admin option for that, but I wasn't sure how useful that would be - the text is really only there to try and make the menu a little more accessible. Like you, I hide the text and only show a background image using the top-padding trick (taken from the tweaked dhtml_menu.css):

li.dhtml-menu a.dhtmlMenuControl 
{
  position: absolute;
  left: -0.5em;
  width: 1em;
  height: 0; /* hide link text */
  padding: 1em 3px 1px 3px; /* add top-padding so that bullet image shows */
  overflow: hidden; /* hide the overflowing text */
  background: none;
  text-decoration: none;
}
blogbold’s picture

blogbold commented

Great! Many thanks!

I created two small icons, "+" and "-" to show the state of the menu by adding this code to the css of a theme:

li.dhtml-menu.collapsed > a.dhtmlMenuControl {
        position: absolute;
        left: -1em;
        top: 0.5em;
        width: 1em;
        height: 0; /* hide link text */
        padding: 1em 3px 1px 3px; /* add top-padding so that bullet image shows */
        overflow: hidden; /* hide the overflowing text */
        background: url("/sites/all/files/images/menu-plus.png") no-repeat;
        text-decoration: none;
}
li.dhtml-menu.expanded > a.dhtmlMenuControl {
        position: absolute;
        left: -1em;
        top: 0.5em;
        width: 1em;
        height: 0; /* hide link text */
        padding: 1em 3px 1px 3px; /* add top-padding so that bullet image shows */
        overflow: hidden; /* hide the overflowing text */
        background: url("/sites/all/files/images/menu-minus.png") no-repeat;
        text-decoration: none;
}
blogbold’s picture

blogbold commented
StatusFileSize
new fix-store-expanded-menus.dhtml_menu.with_.dhtml_menu_3-5_bullets.patch.patch738 bytes

The patch "dhtml_menu_3-5_bullets.patch" breaks storing the open/close-state of a menu by dhtml_menu.

The attached patch fixes this.
It should be applied after the "dhtml_menu_3-5_bullets.patch".

blogbold’s picture

blogbold commented
StatusFileSize
new dhtml_menu_3-5_bullets.patch.with-fix-store-expanded-menus.patch5.38 KB

Single patch - the attached patch includes both the original "dhtml_menu_3-5_bullets.patch" and "fix-store-expanded-menus.dhtml_menu.with_.dhtml_menu_3-5_bullets.patch.patch".

matkeane’s picture

matkeane commented

The new patch works well, but it reminds me why I ignored the cookie issue in the previous patch - I don't actually like all the menus staying open! I know it's a personal preference, but once I've clicked on a link, I prefer to see only the relevant menu stay open once I land on the new page, and not all the other menus I rummaged through before I clicked. On one site of mine with several menus for browsing content in different ways, I rapidly end up with all the menus unfolded and a mile-long sidebar, unless I close them manually (which is a pain).

Can we make this an option on the admin config page (I think it used to exist in older versions) - something like 'Remember opened menu states' which would set, or ignore, the cookie?

And I'm still seeing the open-and-then-shut-again weirdness when 'Keep only one menu tree open' is selected, but that's down to something I missed in the original patch. Anybody got any pointers as to what's causing that?

blogbold’s picture

blogbold commented

Can we make this an option on the admin config page

Good idea! Hm, after implementing such an option, it seems to me the "Keep only one menu open at a time" prevents restoring (all other) opened menus already. A few tries gave the same result. But maybe I'm missing a possible difference.

matkeane’s picture

matkeane commented

Yeah, sounds like the same problem. Once I select "only one menu at a time", the active menu is correctly unfolded, but other menus can't be opened - at least not usefully. They animate open and then immediately shut again. I assume that, once the opening animation finishes, a script is running which thinks that they should be closed, since the active menu is stuck open and only one menu can be displayed at a time. Again, if anybody has any pointers to a solution, I'll have a look, but I can live without this option for the moment!

blogbold’s picture

blogbold commented
StatusFileSize
new fix-keep-only-one-menu-open.dhtml_menu.with-bullets-patches.patch663 bytes

The option "Keep only one menu open at a time." works with the attached patch.
It requires the above patches (like #9 http://drupal.org/node/564428#comment-2820774) to be applied before.

marcoka’s picture

marcoka commented

this idea is very great guys because every tree system i know works this way and so the root parent could still be a link. subscribe

applied:dhtml_menu_3-5_bullets.patch 5 KB
then #9 and then #13

after dhtml_menu_3-5_bullets.patch it was working. now its not working anymore.

blogbold’s picture

blogbold commented
Title: Patch for D6 - Use menu item bullets to expand menus » Which patches to apply...

Use method a) or b).

a) - Intended for a fresh installation of dhtml_menu 6.x-3.5:

  1. #9 dhtml_menu_3-5_bullets.patch.with-fix-store-expanded-menus.patch (http://drupal.org/node/564428#comment-2820774)
  2. #13 fix-keep-only-one-menu-open.dhtml_menu.with-bullets-patches.patch (http://drupal.org/node/564428#comment-2847416)

b) - dhtml_menu 6.x-3.5 already patched with the initial dhtml_menu_3-5_bullets.patch:

  1. #8 fix-store-expanded-menus.dhtml_menu.with_.dhtml_menu_3-5_bullets.patch.patch (http://drupal.org/node/564428#comment-2820766)
  2. #13 fix-keep-only-one-menu-open.dhtml_menu.with-bullets-patches.patch (http://drupal.org/node/564428#comment-2847416)
matkeane’s picture

matkeane commented
Title: Which patches to apply... » Patch for D6 - Use menu item bullets to expand menus

Reverting title.

@blogbold: Thanks for the patch in 13, will have a play with that shortly.

endiku’s picture

endiku commented

Great patches and much needed improvement. The original concept is good but users are too unadaptive to change. And a single click for a top item is more efficient than two clicks.

samhassell’s picture

samhassell commented

subscribe

samhassell’s picture

samhassell commented
Status: Needs review » Reviewed & tested by the community

method a) in http://drupal.org/node/564428#comment-2862258 seems to work well.

marcoka’s picture

marcoka commented

yes it does work #15

jolava’s picture

jolava commented

I use a subtheme of Adaptative Theme. I solved the problem by adding to the class: display:list-item;

For instance, I use the class "test" that I apply to my bloc that contains the menu using the Block_Class module. In theme.css (adaptative theme), I added some css code to theme my block. I can change the bullets style by using the following CSS code.

.test ul li.collapsed.active-trail{
list-style-image: url("flechedroite2.png");
list-style-position: inside;
display:list-item;
}

etc..

Note that I added "display:list-item;". This is crucial to add this line, otherwise, the image associated to the expanded/collapse bullet NEVER show up.

marcoka’s picture

marcoka commented

if this will be integrated and some icons, + signs are needed, i would be happy to provide them.

samhassell’s picture

samhassell commented

Chances of getting this into 6.x?

samhassell’s picture

samhassell commented
StatusFileSize
new bullet-dropdowns-564428-24.patch5.29 KB

Combined the 2 patches as mentioned in #15. Against 3.x-dev.

SillyJonna’s picture

SillyJonna commented

Thank you for this. However, I've been unable to successfully apply any patches on Windows. Can you please provide the patched .module or .zip?

vuil’s picture

vuil
Location Bulgaria 🇧🇬 🇪🇺 🌍
commented
Status: Reviewed & tested by the community » Closed (outdated)

I closed the issue as Closed (outdated) because it is for unsupported 6.x version of Drupal and not relevant to the newer versions.

Thanks for the contribution!