SimpleMenu (The module —)

The SimpleMenu module for Drupal 6.x and 7.x offers a drop-down menu that inserts itself at the top of your browser window on your website.

The menu can be fixed1 or scroll with the page.

By default, SimpleMenu presents the Navigation menu in Drupal 6.x and the Management menu in Drupal 7.x. You can change the SimpleMenu settings to display a different menu and show it on another tag than the Body tag.

The following pages describe how the SimpleMenu can be setup and different known issues and how to handle them.

Simplemenu Settings

Menu Settings

Menu

Select the menu to be displayed as the Simplemenu. By default, we display the Navigation Menu which makes the most sense for administrator (as the Simplemenu was primarily created for administrators wanting to quickly go to all administration pages.)

Theme

Select a theme to display your Simplemenu items and dropdowns. The default is called original.

The themes reside in the module sub-folder named themes. Each theme is defined in a specific directory named after the theme. That name is what appears in the dropdown in the settings.

It is possible to add new themes as required. You may want to start by copying an existing theme and tweaking it.

Hide when empty

This check box indicates whether the menu should be hidden when empty. By default, you get a message saying that the menu is empty.

Note that should never happen with the default navigation menu, although if you allow all users to see the menu, anonymous users may not have access to any menu items, rendering it empty, and thus hiding the menu in this case is probably a good idea otherwise users may wonder what the heck is that message about?!

Simplemenu Settings

Scroll of fix menu

The Simplemenu can scroll with the page (the default) or be fixed at the top.

Fixing the menu at the top has two small issues:

  1. The scrolling of the page remains 1 whole page so you lose a small part of what is being scrolled as part of the page is hidden at the top of the screen;
  2. The "Site configuration" sub-menu is often growing to a size taller than your page and thus the items at the bottom become inaccessible.

In practice, though, it is generally better since you may scroll on your page and still access the entire Navigation menu.

Hide Delay

The time it takes to hide the menu when the mouse goes out of any one item.

This is important since while moving the mouse around to access an item you often move it outside of the menu. This delay prevents losing the menu at such time.

The default is 800 milliseconds.

Show Effect

Show an effect when opening the dropdown sub-menus. By default these effects are very fast (less than a second.)

The default is the Fade effect.

  • Fade — fade the menu in and out
  • Slide — slide the menu in and out; if you have large dropdowns, this may not always look good
  • None — no effect at all

Note that if you let many users access your Simplemenu, many will not have a powerful computer. This means the effect may be a problem for them. In that situation, I recommend None.

Show Speed

The speed at which the Show Effect is to be shown. By default, the effect is set of Fast.

The best way to know how it looks is to test the different settings in your browser.

Advanced Settings

Show to user ID 1

Whether the menu should appear to the top administrator or not.

By default it is shown to the administrator.

However, some administrators like to make use of the Simplemenu for their users and themselves make use of another administration menu. In that case, this feature offers a way to prevent displaying both menus at the same time.

SuperFish version

Because the Simplemenu has to work with many other modules and at times these other modules also make use of SuperFish, this option was created so you can decide which version is compatible with these other modules.

The special option "Custom or theme" is used when another module or theme already inserts SuperFish (as it should never be inserted more than once on the same page.)

Scope of Simplemenu menu variable

Simplemenu makes use of JavaScript. The PHP code generates a large JavaScript variable with all the necessary menu information. That variable is saved in the header by default. In some circumstances, that may not work right and thus it can be moved to the footer.

There should be no difference between either position, it is just more usual to have it in the header.

Another reason to put it in the footer is to accelerate the loading of your pages, especially if you offer the menu to all your users instead of just admins.

Cache the Simplemenu variable

The Simplemenu variable is pretty large and costly to rebuild on each access. It is possible to cache it so it is not regenerated every time you access your website. If you experience any problems (i.e. menu not being refreshed properly) try turning this feature off.

Menubar CSS z-index value

The Simplemenu drop-down menus are expected to appear over all the other items on the page. At times, other modules add an object with a z-index higher than the default used by Simplemenu. This option let you change the z-index to any large value.

For example, if you are using AddThis, the z-index needs to be set to a very large value: 2,000,001 (without the commas.)

Similarly, you may want the Simplemenu to appear below other objects (i.e. a pop-up window such as lightbox.)

Dropdown CSS z-index value

The Simplemenu drop-down system has many levels, the first is the Menubar appearing at the top. The second and following are the drop-downs. The CSS z-index of these can be changed using this input box.

There should be no need to change this z-index since all these items appear inside the menubar block and thus follow that z-index first. I first added this feature thinking it would be necessary. At this it is set to -1 and should certainly remain that way.

CSS select to attach menu to

By default, the Simplemenu is attached at the very top of the screen. To do so, we attach it to the BODY field. This option let you change the HTML item where the menu is attached.

It is particularly useful when you want to move the menu somewhere in your website page.

For example, you may have a Flash animation at the top and you do not want to mark that Flash animation as having a transparent background (i.e. it would be slower to play!) Thus, you want to move the Simplemenu widget under that Flash animation. It is simple. Look for the tag in your HTML that appears after the Flash animation and enter its name in this box. Say your HTML looks like this:

  <div id="header"><embed ... flash information ... ></div>
  <div id="content"><?php echo $content ?></div>

Then the CSS selector is div#content or just #content.

Attach method

The Simplemenu is attached to the specified HTML item in one of three different ways:

Prepend

Attach it at the beginning of the specified item. From our previous example, you'd get:

  <div id="header">...</div>
  <div id="content"><div id="simplemenu">...</div>...</div>

Append

Attach it at the end of the specified item. From our previous example, you'd get:

  <div id="header">...</div>
  <div id="content">...<div id="simplemenu">...</div></div>

Replace

Replace the specified item with the menu item. This can be done only with themes that have a special item that is expected to be replaced by the Simplemenu code. This is useful if you want the menu to appear at a specific location that cannot otherwise be obtained with the Prepend or Append features.

For example, you may want to have the menu between the header and content as defined here:

  <div id="header">...</div>
  <div id="place-simplemenu-here">...</div>
  <div id="content">...</div>

This may allow the menu to be wider than the content block. The CSS selector would be set to #place-simplemenu-here.

Theme Exclusion

Some themes are not compatible with the Simplemenu feature, although newer versions of this module are quite robust and I have not myself found a theme where the menu fail miserably, I'm sure a few still exists.

These check boxes or table1 allows you to prevent the menu from appearing whenever the website is used with particular themes.

Detect pop-up windows

This option is a smart feature. It checks a variable in JavaScript which is not set unless the window is considered a pop-up window.

The problem is that many times this assumption is wrong, especially when you clicked on a link from another website with the target="_blank" flag. Then the pop-up code thinks the new window is a pop-up (which in a way is true.)

By default, this flag is still set, which is probably wrong... but it has been that way for ages so I hesitate to change it.

The other way to avoid the Simplemenu in pop-up windows is to add the URLs in the Show block on specific pages (see below). That may not always be possible though (i.e. some pages may at times be shown as pop-ups, and at times not so...)

For detailed information, check Handling of Pop-up Windows by SimpleMenu.

Allow Simplemenu to call the theme() function

By default, Simplemenu is written to avoid calling to the theme() function. It is done so because otherwise attempting to change the theme with another module, such as themekey, fails.

However, once in a while, it is necessary to call the standard theme() function because it will further tweak the HTML generated by Simplemenu. For example, the Simplemenu Inactive Parent Menu requires the theme() function to be called. It captures those calls and tweak the menu item and change the anchor links (<a> tags) into plain text (<span> tags).

Show block on specific pages

This feature is used to allow Simplemenu on specific pages or not.

This is very similar to the same box of the Blocks interface.

By default, this feature prevents Simplemenu from appearing on the IMCE pop-up window and the noderelationships pages which are shown as pop-up windows.

Any number of pages can be added here.

  • 1. Depending on the number of themes you've got, the settings will display the list of themes in a different way. When you have a large number of themes, we switch to a select list which makes it easier to select the themes.

Handling of Pop-up Windows by SimpleMenu

Feature

By default, SimpleMenu is not shown on pop-up windows. There is a flag in the SimpleMenu settings that can be unchecked to avoid this side effect. The pop-up capability is often detected when you open a new tab from the current window. It will depend on the browser and the link being clicked1.

Quick Fix

When the menu is only used by the administrators, it is possible to simply open a new tab and copy and paste the URL from the existing window with the missing menu to the new tab and hit enter. The menu will then appear in new tab and you can close the old tab where the menu is missing.

This works in all cases, but is really workable only for administrators. It can also be annoying after a while to have to transfer from one tab to another.

Pop-up Window SimpleMenu Settings

The SimpleMenu pop-up and pages settings.If you do not use any pop-up window, you can go to the global settings and turn off the Detect pop-up windows checkbox.

Turning off the Detect pop-up windows checkbox bypasses the JavaScript test. This means that whether you are in a pop-up or not, the menu will be inserted in the window.

In most cases, this will not be a problem on a Drupal site.

There are two known places that will get the menu when they should not:

  • The IMCE pop-up window2,
  • The pop-up API using IFRAME to display other windows within a page.

Pop-ups and Pages

If the JavaScript code is really a problem, you will need to turn off the Detect pop-up windows checkbox. This means you will see the menu in pop-up windows.

To paliate to this problem, you may add the path to pop-up windows in the Pages text area and select the Show on every page except the listed pages.

Often, you cannot see the path to a pop-up. The right mouse button should give you the option to open the Properties where you will find the path.

Pop-ups and Themes

It is also possible to hide the SimpleMenu based on which theme is being used to display a page. If you can use a different theme for your pop-up windows, then you could also forbid the use of SimpleMenu with that theme.

Pop-ups and attachment

The wrapper div tag in Garland.You may change the default attachment of the SimpleMenu bar. By default SimpleMenu is attached (prepend) to the body tag. Instead, you can enter the identifier of an object such as #wrapper. You may also enter the name of a class. In tha case, the SimpleMenu bar is attached to the first element marked with that class.

This works whenever your pop-up windows do not use the default page.tpl.php and thus do not include a #wrapper element. When the same page template is used for pop-ups, this method does not work.

  • 1. We are trying to ameliorate the code, but it is not easy to make it work properly 100% of the time.
  • 2. You can find the IMCE module on Drupal.org.

SimpleMenu Custom Theme

Introduction

The newer versions of SimpleMenu allows for an easy way of adding custom themes.

There are two main ways to add new SimpleMenu themes:

1. In the simplemenu themes folder;

2. In your theme folder.

SimpleMenu themes folder

CSS

If you look under the simplemenu folder, you will see a sub-folder named themes. You can place your own specialized themes in that folder to make them available system-wide (i.e. if you are using many themes or use one Drupal installation for many websites.) In other words, this folder is viewed as a global theme folder.

The themes folder expect a sub-folder with the name of the theme and at least one CSS file with the same name and the .css extension:

	simplemenu/themes/<my_theme>/<my_theme>.css

The folder may include other files such as images of arrows replacing the default simplemenu system icons.

Setup

In order for your theme to be used, go to the main SimpleMenu settings screen and choose your theme as the SimpleMenu theme. If you already had the window open when installation the theme sub-folder, it will not appear in the list. Reload the page and you will now see it.

Make sure to save your changes.

Now SimpleMenu uses your CSS file.

Theme specific SimpleMenu CSS

You have two ways to make the CSS of a specific theme work with SimpleMenu.

Overwriting

This method is what is used in most cases. You can overwrite all the CSS entries from the default SimpleMenu themes in your theme style.css files. This way you make sure that your look will work in all situation.

This method is quite useful as it requires no changes to the SimpleMenu settings and thus the default SimpleMenu theme will automatically kick in as required (i.e. Administration theme, etc.)

Custom Theme

This method allows you to completely avoid the SimpleMenu CSS file. This is a selection available in the SimpleMenu settings screen.

The difference between the Custom Theme and the Overwriting method is that the custom theme does not require you to overwrite every single CSS entry. Therefore, it simplifies the handling of the CSS greatly.

It is otherwise very similar to Overwriting.

Note that in this case switching between themes may cause a problem since only themes that now have SimpleMenu CSS data will work properly. Other themes will show the menu unthemed.

Sharing Themes

New themes are very welcome. Please, attach them to the SimpleMenu issue queue.

If you create a special theming for your own theme, simply check those changes to your theme CVS repository. You may want to let people know that they need to use Custom Theme if you do not overwrite all the CSS from the default simplemenu stylesheets.

Simplemenu Inactive Parents

Description

A simple menu is composed of parent menus and children menus. A child has no drop-down menu and a parent does.

By default all the menu items are active, meaning that they all are links one can click on to reach the corresponding destination.

This simplemenu extension allows for turning the link off by replacing the anchor reference in a named anchor. The HTML tag being the same, the simplemenu looks the same, but the item cannot be clicked.

At this time, there is no option to make some of the parent items clickable and others not.

Setup

There is no settings for this module. Installing it runs it. To stop this functionality, disable the module.

NOTES

This module makes use of the theme registry. Remember that the registry is cached and thus it may or may not work because the cache is not properly reset. In order to make sure, before reporting a bug, you should clear your theme registry cache (the Admin menu or Mini modules offer such a feature.)

Known Issue

By default, Simplemenu is set to avoid calling the theme() function call.

Calling the theme() function from a hook_init() callback prevents the system from changing the theme as defined by other modules: blocks, administration theme and other theme changers such as themekey.

A call to theme() forces the $default_theme global variable to be set, and since that theme has now been used, there is no changing back to another theme afterward.

However, this module hacks the theme() call generating the menu items. In other words, having theme() called is your only hope to get the inactive menus to work.

Allow Simplemenu to call the theme() function

This snapshot shows you the default state of the flag which means that this very module will not work as noted in the IMPORTANT NOTE at the bottom.

See other Simplemenu known issues.

Simplemenu Upgrade Path

Version 7.x

Version 7.x-1.x-dev is a starting point... It is not complete, although it shows you a functional Management menu as a dropdown. More to come as time allows... See issue [#791664] for more info.

Version 6.x

Version 6.x-1.13 fixes the vertical menu problem which had to do with CSS caching getting lost.

Version 6.x-1.10 to 6.x-1.12 fixes the non-called theme() function versus the other sub-modules that have callbacks through the theme() calls. However, we really need to have callbacks instead. Added horizontal and vertical themes. Attempts to fix to the vertical menu problem (because the CSS file could be deleted and not regenerated.)

Version 6.x-1.9 fixes the non-working cache when private file folder is in use. Added a new theme: blackblue.

Version 6.x-1.8 fixes a couple of problems with themes (re-)introduced by calling the theme() function in the hook_init() function. This was solved by re-writing the menu output generator. There is a switch flag in the global settings so you can choose one method or the other.

Version 6.x-1.6/1.7 include the latest fixes and should work really good for most. I should not have much changes to this version for a while (there are still some enhancements I'd like to make though.) If you have problems, don't hesitate to post issues.

Version 6.x-1.5 includes new features and bug fixes (or a new feature to help handle a bug such as the z-index textfield.) Some of the new features: (1) possibility to stick the menu at the top of the screen without it scrolling; (2) dynamically change the z-index parameter; (3) call drupal_alter() so other modules have a chance to modify the menu before it gets displayed; (4) multi-menu support; (5) inactive parent items; (6) separate module for Devel menu support.

Version 6.x-1.3/1.4 includes several fixes that were posted in the issue queue. (Note that 1.3 has a problem, some files are missing... they were not properly tagged. If you had 1.2 and just extract over 1.2 it will work, otherwise just get 1.4) If you have problems upgrading, please check this issue: [#801030]

Version 6.x-1.2 fixes an issue where the theme exclusions don't work, and subsequently can cause problems with displaying or not displaying the menu on certain paths.

Version 6.x-1.1 fixes compatibility problems with Zen theme, fixes an issue with the Black and Blue theme when using Garland and adds a setting to disable the menu on specified paths. More importantly, there is a fix for a bug that made it impossible to administer blocks for non-default themes.

SimpleMenu Known Issues

SimpleMenu Disappears

There following are a few of the main reasons why SimpleMenu disappears.

Pop-up Windows

By default, SimpleMenu wants to hide itself in pop-up windows. This is a feature.

The reason is that many websites will open pop-up windows for all kinds of extra-features such as uploading an image or printing some description of an image or the definition of a word or product.

These windows should not include the SimpleMenu bar.

There is a dedicated page giving several different ways to fix this problem on your website.

Menu Overflow

Long menu going out of screen vertically and horizontally.Very long menus will disappear on the edges of your screen (bottom and right).

Unfortunately, superfish does not provide a feature to open the menus on the other side or break menus in multiple columns. This would be the job of superfish, not simplemenu.

There is a work around which is to edit your menu and make it fit. This can be somewhat annoying with the Administration menu, yet it works very well even when you update modules (i.e. the item will not move back to their original position unless you move them back there.)

CSS Overflow

Screenshot of the Bandwidth optimizations fieldset in your administration performance.The Internet Explorer browsers have a limit to the number of CSS files that can be included with the <link> tag. This limit is between 30 and 32. There is no work around to break the limit, however, it is possible to reduce the number of CSS files by going to your performence administration screen and turning on the Optimize CSS files feature. This should limit the number of CSS files to 3 or 4 depending on the theme you are using.

IMPORTANT NOTES

This has been corrected in Drupal 7.x with the use of <style>@import ...</style> instead of <link> tags. Drupal 7.x users should not experience this problem.

jQuery or SuperFish Conflicts

Although there should not be any jQuery conflicts, it has been reported that in some cases SimpleMenu breaks with more advanced jQuery versions. I use jQuery Update and thus pretty much always have the latest version running. For this reason, there should not be any problem with the jQuery library.

SuperFish has been reported to not work correctly when other modules use a different version than SimpleMenu. The Settings let you choose between different versions and custom. If another module always inserts SuperFish, then selecting custom is probably your best bet.

Simplemenu doesn't work with private files

There has been problems with older versions trying to save the dynamic CSS file in the private file environment.  This has first been solved by using the default CSS. This means the dynamic CSS is not available (although nothing prevents you from editing the default CSS file as required by your website.)

Since version 1.14, private Simplemenu with dynamic CSS works when you also install ctools. This is because ctools now has a mechanism to save CSS files in the private files environment and make them work right.

IMPORTANT NOTE

The ctools module is not a forced requirement of Simplemenu and therefore by default the dynamic CSS generated by Simplemenu will not work with a private environment (unless you already had ctools installed on your system.)

Simplemenu doesn't look right

At times, the theme you are using will re-define the menu CSS without protections. In that case, those changes will eventually affect Simplemenu.

There isn't any way that I know of to fix the problem without having to edit the CSS of the theme you want to use and make the ul.menu entries play nice with Simplemenu. In practice, this generally means changing CSS like this:

  ul.menu li {
    padding-left: 1.3em;
    color: blue;
  }

into something like that:

  #page ul.menu li {
    padding-left: 1.3em;
    color: blue;
  }

(obviously, #page is an example, different themes use different names for the main div such as #main, #screen, etc.)

Note that you may have to add a <div id="..."> tag around the entire content of your page.tpl.php. If the theme you are working on has several page-*.tpl.php make sure to edit all of them.

And of course, if you have a better solution than mine, especially one that would not involve the editing of someone else theme, then let me know! (by posting a comment here, or even better, an issue on Drupal.)

Simplemenu Inactive Parents Menu & parents still active

When you install Simplemenu, by default, it does not call the theme() function which the Simplemenu Inactive Parents Menu uses. You want to go to the Simplemenu global settings and turn on the Allow Simplemenu to call the theme() function flag on.

For more info, check the Simplemenu Inactive Parents Menu documentation.

Horizontal menu separator not working (I see the - instead)

The Horizontal menu separator capability is very specific to the Simplemenu system and only work when the system theme() function is not called.

This means it only works with the Allow Simplemenu to call the theme() function flag is off, which is the default.

As a side effect, this means it is incompatible with the Simplemenu Inactive Parents Menu module.