Last updated November 7, 2016. Created on November 2, 2013.
Edited by Christopher James Francis Rodgers. Log in to edit this page.


'DHTML Menu' uses Javascript to reduce the number of page loads when you are using nested menus (sub-menus).

This is particularly useful when you want to immediately see which pages are in a sub-menu (and the sub-menus of that sub-menu, etc., etc.), because you will not have to open additional pages just to find out which pages are contained within.

 | Jump down to Contents ⤵ |

[2016.11.07] This page is a work in progress. In particular, I need to redo the section "[Solved] Problem: 'collapsed' list-bullet icon displaying instead of 'expanded' icon" to make it easier to understand, instead of the rough draft that it is.

Note: When the symbol "⎘" follows a link, it means that the link opens in a new browser tab/window, leaving this page open.

'DHTML Menu' project page at drupal.org (including Download links) ⎘ 




Note: The permanent URL for this page is: https://www.drupal.org/node/895232 Although this page is still in the old documentation section on drupal.org, eventually it will be moved to the new 'docs'. Do not link to any of the new Documentation pages using the textual 'friendly URL' in the address-bar of those pages. The URL for that page will change every time someone decides to change the page's 'title'. If you want to link to one of the new drupal.org documentation pages, login to drupal.org, click the "Edit" button for the page you want to link to, and remove the "/edit" portion of the URL that you then see in your browser's address-bar. The permanent URL you should use will be similar to https://www.drupal.org/node/###### with numerals instead of '######'.




Contents

      | Page Top ⤴ |

  1. Drupal 7 DHTML-Menu live site example

  2. Drupal 8: Hopes and dreams

  3. Do Not use the Drupal 7 Beta version. Use the Dev version.

  4. Install and enable the development version of 'DHTML menu' for Drupal 7

  5. You must "Clear all caches" after running the update script.

  6. Go to your site's 'DHTML Menu' configuration options page.

  7. Configuration option changes I use on every Drupal 7 site

  8. Default 'DHTML Menu' configuration option settings for your reference

  9. [Solved] Problem: 'collapsed' list-bullet icon displaying instead of 'expanded' icon

   | Page Top ⤴ | Contents beginning  ⤴ |

 

  1. Drupal 7 DHTML-Menu live site example

       | Contents at this point ⤴ | 

    At bottom of every page of the website at the following link, you will see the D7 DHTML-Menu in action. I renamed the Drupal "Book Navigation" menu, (which is a 'block',) to "Site map - ...".

    great-grandma.com/wbi ⎘  (This link opens in a new tab/window.)

    That site (currently a rag-tag mess) is composed entirely of only 'Book' pages. The visitor can see what every page on the site is by expanding the 'Site map - ...' menu items.

    'DHTML Menu' at that site is setup according to the instructions below.

  2. Drupal 8: Hopes and dreams

       | Contents at this point ⤴ | 

    The 'DHTML Menu' has not been actively worked on by its original creator for a long time.

    It works just fine for my limited Drupal 7 needs, but the Drupal 8 version, unfortunately, may never be ready if you do not help.

    This is a sad situation for an 'end-user-only' like me, since I have no intention of upgrading to Drupal 8 until I find a suitable alternative for this magical module-- which is one of only four contrib modules I use on my main site, and the pride of my life here (This link opens in a new tab/window. The username and password are both: toltec)

    I could learn how to install Drush on Windows, and how to use GitHub, and to program in PHP, and Javascript, (did I miss anything?) but by the time I am done, my version of 'DHTML-Menu' would ready just in time for the release of Drupal 11.


    Please help with the Drupal 8 version of 'DHTML Menu':

  3. Do Not use the Drupal 7 Beta version. Use the Dev version.

       | Contents at this point ⤴ | 

    Do NOT use the "Beta" version
    (7.x-1.0-beta1 2010-Nov-09 )

    [From the year 2010].

    Use only the "Dev" version
    (7.x-1.x-dev 2013-Sep-30)

    [Actually From the year 2011].

    The dev version is actually from 2011-Nov-10. When drupal.org was upgraded from Drupal 6 to Drupal 7 on 2013-Sep-30, all dev versions of modules and themes which came out prior to that day, and which have not had subsequent releases, now all carry a dev release date of 2013-Sep-30.

    If you had installed the dev version 2011-Nov-10 prior to 2013-Sep-30, the update manager will indicate that a newer dev release is available, but in fact the two releases are the same.

    You do Not need to update your pre-2013.09.30 dev version known as '2011-Nov-10' to dev version '2013-Sep-30' unless you simply want to eliminate the update notice.

  4. Install and enable the development version of 'DHTML menu' for Drupal 7

       | Contents at this point ⤴ | 

    Install the development version 'DHTML menu'.

    If you want precise step-by-step instructions for installing a D7 module, see the drupal.org page [D7] ~ Installing contributed modules: Find, import, enable, configure ⎘  . (This link opens in a new tab/window.)

    'DHTML Menu' project page at drupal.org (including Download links)

  5. You must "Clear all caches" after running the update script.

       | Contents at this point ⤴ | 

    As you may or may not know, you need to run the update script after updating to a newer version of Drupal 7, or after updating some modules.


    "[d7-root]/update.php"

    MYSITE.com/update.php

    Although it may not be necessary, I do recommend that you run the 'update script' after installing 'DHTML-Menu'. It can't hurt.

    For more information, see Run the update script for your Drupal 7 site ⎘  (This link opens in a new tab/window.)

    I have found that with 'DHTML-Menu', any-time, and every-time, that I run the update script, as for example, after updating Drupal to a newer version (as for example, from D7.31 to D7.34), the 'DHTML Menu'(s) will not expand until I 'Clear all caches'.

    To 'Clear all caches', go to the page "Configuration" > "Development: Performance"

    [d7-root]/admin/config/development/performance.

    Click the button "Clear all caches".

  6. Go to your site's 'DHTML Menu' configuration options page.

       | Contents at this point ⤴ | 

    First of all, in case you were wondering, there are NO 'permissions' associated with 'DHTML-Menu'.

    Go to your site's page for the configurable options for 'DHTML-Menu' at:

    "Administration" > "Configuration" > "User interface" > "DHTML Menu"

    [d7-root]/admin/config/user-interface/dhtml_menu

  7. Configuration option changes I use on every Drupal 7 site

       | Contents at this point ⤴ | 

    'Other effects' changes I make

    • 'When a menu opens': "Keep other menus open"
    • 'When a menu closes': "Close all its sub-items, too"

  8. Default 'DHTML Menu' configuration option settings for your reference

       | Contents at this point ⤴ | 

    Default 'DHTML Menu' configuration option settings for your reference

    This list is intended to let you know what the original option settings are, so that you will feel free to experiment by changing any option you want to try, and yet allowing you to know what the original default options were.

    • Static navigation
      • No Collapsing
    • Animation
      • Effects
        • Slide in vertically
        • Fade in
      • Speed
        • Fast (0.5 s)
    • Other effects
      • When a menu opens
        • Close other open menus in the same tree.
      • When a menu closes
        • Remember which sub-items were expanded
          when it next opens.
      • When a new page is loaded
        • Expand only the currently active path.
    • Disabling DHTML
      • Filter type
        • Disable DHTML on the menus checked below.
      • List
        • [NONE]

     

  9. [Solved] Problem: 'collapsed' list-bullet icon displaying instead of 'expanded' icon

       | Contents at this point ⤴ | 

    You will most likely experience the 'collapsed' list-bullet displaying when the 'expanded' list-bullet should be being displayed instead.

    My solution was reversing the order of the 'expanded' CSS code and 'collapsed' CSS code in my theme/sub-theme, so that the reference to 'expanded' follows after the reference to 'collapsed'.

    That solution, which will be discussed in detail next, has workeded flawlessly for me, but it might be worth noting that I am using the 'DHTML Menu' configurations options which I listed further above.

    The List-Bullet Problem

    The list-bullets being displayed are being controlled by CSS code. The work-around for the problem addresses the fact that:

    The "collapsed" CSS code follows the "expanded" CSS code in the CSS file that is actively controlling your web-page.

    The ordering of the CSS would not normally be a problem, but there is a flaw in the 'DHTML Menu' module which leaves a 'class' of "collapsed", in addition to "expanded", in the HTML code within the 'expanded' <li> element tag.

    ---

    Tip: Use the FireFox Add-on Extension FireBug to easily see what CSS code is controlling any element on a webpage. Go to FireBug - getfirebug.com and near the top-right on that page, look for the heading "Introduction to Firebug", and click the text-link "Watch Now >>" to see a 6-1/2 minute introductory video.

    Tip Note: Un-check "Aggregate and compress CSS files" at:
    'Configuration' > 'Development: Performance'
    [D7-root]/admin/config/development/performance
    otherwise FireBug will be telling you about your cached files located in [D7-root]/sites/default/files/css, instead of the css files in your active theme or sub-theme.

    ---

    With CSS, when there is more that one CSS code reference to a specific item (or element), the duplicate CSS reference which comes last take precedence over the earlier references.

    It the case of our problem with the list bullets, the first CSS reference to them is in the Drupal core file "system.menus.css" at:

    [D7-Root]/modules/system/system.menus.css

    Approximately lines 18+ ...

    ul li.expanded {
      list-style-image: url(../../misc/menu-expanded.png);
      list-style-type: circle;
    }
    ul li.collapsed {
      list-style-image: url(../../misc/menu-collapsed.png); /* LTR */
      list-style-type: disc;
    

    In the case of my using a Zen sub-theme, my sub-theme's CSS also addresses the 'expanded' and 'collapsed' items.

    Since a theme's CSS code is referenced after the core's CSS is referenced, the core CSS code is ignored. Again, the later CSS takes precedence in the hierarchy of CSS.

    Before I changed it, my 'Zen Midnight' theme had originally specified:

    ul li.expanded {
      list-style-image: url(../images/menu-expanded.png);
    }
    ul li.collapsed {
      list-style-image: url(../images/menu-collapsed.png);
    }
    

    As mentioned briefly earlier, inside of the HTML for the <li> tags, which are responsible for improperly displaying the 'collapsed' image, instead of the 'expanded' image, you will find in those <li> tags that the 'class' attribute contains both of the words 'collapsed' and 'expanded'. The order of those two words within the <li> tag is not relevant: It is the hierarchal order of the CSS that counts.

    The List-Bullet Solution

    Note: When editing any text file for use as code, it is critical that you use a text-editor that will not break the code. 'Open', 'edit', and 'save' CSS files, for example, only with a text-editor like the free tool "NotePad++", a text-editor which you are sure will not add extraneous invisible formatting code that will wreck the file, as would be the case with Microsoft Word.

    With any of the following solutions, after you have made changes to a CSS file, (and uploaded it to your web-site if it is online), you can ensure that the changes will take effect by clearing all of the caches.

    "Clear all caches":
    Go to 'Configuration' > 'Development: Performance'
    [D7-root]/admin/config/development/performance
    and click the button "Clear all caches".

    To get the proper bullets to display, I simply had to modify my theme CSS so that the reference to "expanded" comes after "collapsed". (See solution #5 below)

    This list-bullet problem, however, can be resolved in one of several ways. This list is roughly in the order of 'ease of application', though the first two may not be sufficient to solve the issue:

    • Reverse the order of the 'expanded' and 'collapsed' CSS code in the "system.menus.css" file at [D7-Root]/modules/system/system.menus.css (Note: This will not work if your theme/sub-theme makes reference to the same items, but it will not hurt to try.)
    • Add only the 'expanded' portion of CSS code to the bottom of the "system.menus.css" file at [D7-Root]/modules/system/system.menus.css (Note: Again, this will not work if your theme/sub-theme references the same items.)
    • Whether or not your theme/sub-theme is referencing the list-bullets, you can add the 'expanded' piece of CSS code to botttom of the last CSS file your theme/sub-theme is using.
    • If your theme references the list-bullets, reverse the 'expanded' and 'collapsed' CSS code in your theme/sub-theme, so that the 'expanded' CSS code follows after the 'collapsed' code. (This is the solution I use.)
    • Apply one (or more) of the DHTM Menu patches. [Good luck; don't ask me]

    Solution #1.) Reverse the order of the 'expanded' and 'collapsed' CSS code in the "system.menus.css" file

    Note: This will not work if your theme/sub-theme makes reference to the same items, but it will not hurt to try.

    The file "system.menus.css" is considered part of Drupal core, and it is generally a poor choice when it comes to making changes to files, because those changes are lost when you update the site to a newer version of Drupal core.

    It does have the benefit, however, of being easy to do if you are unfamiliar with working with theme CSS files. It also has the benefit that it works for any different theme you may use, again, provided that the theme itself does not make specific reference to the same items.

    The draw-backs to this method are that it will not work if your theme/sub-theme is over-riding it, and also, you will have to remember to change the code again if you update Drupal core.

    Tip: Make a copy of the original "system.menus.css" file before you edit it, just in case you mess something up. :o)

    What to do:

    Reverse the the order of the 'expanded' and 'collapsed' CSS code in the "system.menus.css" file at [D7-Root]/modules/system/system.menus.css (approximately line 18+) so that it is now:

    ul li.expanded {
      list-style-image: url(../../misc/menu-expanded.png);
      list-style-type: circle;
    }
    ul li.collapsed {
      list-style-image: url(../../misc/menu-collapsed.png); /* LTR */
      list-style-type: disc;
    

    "Clear all caches":
    Go to 'Configuration' > 'Development: Performance'
    [D7-root]/admin/config/development/performance
    and click the button "Clear all caches".

    Solution #2.) Add only the 'expanded' CSS code at the bottom of the "system.menus.css" file

    This is just a slight variation of solution #1. I mention this solution mostly just for the sake of completeness.

    If you are new to CSS, as you consider this solution, hopefully it will emphasize the idea of the hierarchal nature of CSS, and that in the case of duplicate CSS code, the latter takes precedence.

    So, in this alternative solution, you just add only the 'expanded' portion of CSS code to the bottom of the "system.menus.css" file at [D7-Root]/modules/system/system.menus.css

    ul li.expanded {
      list-style-image: url(../../misc/menu-expanded.png);
      list-style-type: circle;
    }
    

    Note: As with solution #1, you can try this with causing any problems, but it will not work if your theme references the same items.

    "Clear all caches": Go to 'Configuration' > 'Development: Performance' [D7-root]/admin/config/development/performance, and click the button "Clear all caches".

    Solution option #3.) Add only the 'expanded' bit of CSS code to your theme/sub-theme

    Whether or not your theme/sub-theme is referencing the list-bullets, you can add the 'expanded' piece of CSS code to your theme/sub-theme, and thereby avoid changing the Drupal core file "system.menus.css".

    If your theme/sub-theme is referencing the list-bullets, you must use this or one of the other following solutions.

    This solution is intended for those of you without CSS experience, and who are not interested in learning CSS by using, for example, a 'most excellent' tool like FireBug; which I discuss in solution #4.

    This solution will discuss adding the 'expanded' piece of CSS code to the bottom of the last CSS file your theme/sub-theme is using, but you could, in fact, add the 'expanded' bit of CSS code anywhere in your CSS, provided it is after any other similar reference to the list-bullets, if such references exist.

    Discover which of your theme CSS files is being referenced last.

    Note: First un-check "Aggregate and compress CSS files" at:
    'Configuration' > 'Development: Performance'
    [D7-root]/admin/config/development/performance,
    otherwise the 'source code' you will be seeing will be telling you about the cached files, instead of your theme files.

    While viewing your web-page, in order to see which of your multiple CSS files are being used on that page, and in which order the CSS files are being used, hold down your 'Control' key-board key [Ctrl] (for a Windows computer, anyway), and press the key-board key [U]. (aka, [Ctrl]+[U])

    Very near the top of this 'source code' window that opens, look for the code:

    <link type="text/css" rel="stylesheet" href="http://....."
    

    There will probably be several of those lines.

    Of all those lines, only consider those which refer to files in your theme. The ones that comes later in the top to bottom order, are the ones that take preference, and so the last one listed is the file you will want to edit.

    Note: The "print.css" file, for example, should not be taken into consideration, since it is only used for 'Printer Friendly Version's of your pages.

    Edit the CSS file referenced last in that 'source code', and add the following 'expanded' piece of CSS code to the bottom.

    ul li.expanded {
      list-style-image: url(../../misc/menu-expanded.png);
      list-style-type: circle;
    }
    

    In the example above of my using a Zen sub-theme, starting from the CSS file in control, I have to go one directory level up ("../"), and into the directory "images" to get to the list-bullet images. Therefore, the URL reference to the 'expanded' image is "../images/menu-expanded.png".

    Note: make sure the URL path you specify points to the 'expanded' image.

    "Clear all caches":
    Go to 'Configuration' > 'Development: Performance'
    [D7-root]/admin/config/development/performance
    and click the button "Clear all caches".

    If that does not work for you, you have either made a mistake in following these instructions, (to qqqq qqqqqq qqqq qqqqq q qqqqq

    Solution option #4.) Reverse the 'expanded' and 'collapsed' CSS code in your theme/sub-theme when such code exists. (My preferred method)

    This is the solution I use.

    By using FireBug, as mentioned above, I could easily see exactly what CSS code was controlling the improper list-bullet.

    Note: Un-check "Aggregate and compress CSS files" at:
    'Configuration' > 'Development: Performance' [D7-root]/admin/config/development/performance, otherwise FireBug will be telling you about the cached file, instead of your theme files.

    Tip: (See the FireBug Video mentioned above, at 2-minutes 03-seconds) Click the FireBug 'inspect button' icon (blue rectangle with a blue arrow coming up into it, just to the right of the 'FireBug' button), and then click on the bad list-bullet. The CSS attending that list-bullet will be listed in the right-hand pane of the FireBug window, provided that you are at the tab "Styles" in the right-hand pane.

    My original Zen Midnight sub-theme code was:

    ul li.expanded {
      list-style-image: url(../images/menu-expanded.png);
    }
    ul li.collapsed {
      list-style-image: url(../images/menu-collapsed.png);
    }
    

    ...and now I have it changed to:

    ul li.collapsed {
      list-style-image: url(../images/menu-collapsed.png);
    }
    ul li.expanded {
      list-style-image: url(../images/menu-expanded.png);
    }
    

    "Clear all caches":
    Go to 'Configuration' > 'Development: Performance'
    [D7-root]/admin/config/development/performance
    and click the button "Clear all caches".

    Solution option #5.) Apply one (or more) of the DHTM Menu patches. [Good luck; don't ask me]

    By editing my CSS files as detailed above, I have had no problems with 'DHTML Menu'.

    Granted, I do not use many 'contrib' modules ('contributed by the community'), and I have not had any conflicts which may or may not occur by using some other modules.

    I have seen DHTML 'issue' pages that discuss patches, which are related to getting to the underlying problems of 'DHTML Menu', including (I believe), but not limited to, the root issue of the list-bullet problem.

    I have not yet needed to learn how to apply patches, and so I do not know how.

    One of another patch might eliminate your need to edit the CSS as I have discussed here, but I leave that to you to determine.

    I so know that 'DHTML Menu' is Not actively maintained, and has not been for years, even though the 'project page' says it is.

    Final Note

    I invite and welcome you to edit this page, and/or take a leading role in improving the 'DHTML Menu' module.

    I hate to think that I might have to learn, from scratch, Drush, PHP, etc, etc just to be able to continue to use 'DHTML Menu' if and when I migrate to Drupal 8. I shutter to think.


    For those of you new to Drupal, on the 'Community Documentation' pages, such as this one is, Do Not post support questions, nor post issues and problems, nor suggestions for additional features, etc.

    Please go to the Issues for 'DHTML Menu' page, and search first for similar issues which may already have been posted, before you 'Create a new issue'.

 

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.