Creating drop down menus in Plone

by Paulo Lopes — last modified Feb 04, 2009 02:33 AM
Three step customization of Plone 2.1 and 2.5 that will show a menu under the tab the mouse pointer is over. The menu will be shown if that tab is a folder or a similar type of container with items inside that will appear as menu items.

About Drop Down Menus and Plone 3

As of Plone 3, it is possible to create drop down menus in Plone by simply installing the product named "webcouturier.dropdownmenu," located here.

The webcouturier product uses Plone's folderish structure to drive the drop-down navigation. Using it is as simple as installing it and customizing the CSS as desired. Follow the installation instructions for more information.

 

Introduction - Pre-Plone 3

Limitations

This tutorial focuses on a very specific use case, where every navigation item on your site will be listed as a drop down menu. It is not possible to restrict items from Navigation using the Properties tab checkbox. As a result, it's usefulness is limited. If this use case is not acceptable to you, try the QuintaGroup product, Plone Drop Down Menu, available at: http://plone.org/products/plone-drop-down-menu


About the Suckerfish Method

This how-to shows you a three step customization process that will give you the following functionality:

  • A tab that represents a folder or another type of container will have its contents shown as a drop-down menu.
  • The items on the top level tabs and those items inside each menu will be shown with an icon that represents the item's document type.
  • If an item that is inside of a menu is itself a folder or another type of container too then its contents will be shown in a submenu that will be displayed beside it, thus allowing a 2 level deep menu system for each tab.

 

You will have multiple version support:

  • It will work equally well in Plone 2.1.x and in 2.5.x, using a slightly modified template.
  • It will work equally well with the most popular browsers: Internet Explorer 5.5, 6, and 7, Firefox 1.5, Opera 8, 8.5 and 9, as well as Safari 2.0.

 

The method used to display these menus is based on:

  • Plone's createNavTree function to generate the markup that shows the selected status of the top level tabs.
  • Plone's sitemap code to generate the markup that shows the information for all menus and submenus.
  • CSS styling techniques based on the suckerfish method as described in http://www.htmldog.com/articles/suckerfish/dropdowns/

 

The following image shows the intended result.

1a_intended_result.png

 

The three steps that you will need to take in order to obtain this result are:

  1. HTML Markup - Replace the code in the global_sections template that generates the tabs with code that generates the whole sitemap.
  2. CSS Styling - Change the CSS styling in ploneCustom.css so that the sitemap behaves like a set of drop-down menus.
  3. Support Internet Explorer 6 - Add the suckerfish.js javascript code so that this method also works on the most widely used web browser.

 

To help with this how-to I've created the following folder and document structure in my instances of Plone:

1b_example_sitemap.png

 

I've replicated this structure on a Plone 2.1.3 site (as seen in the previous screen shot) and also on a Plone 2.5 site (from which all the following screen shots were taken) so that I could cross-develop and make changes where appropriate.

 

Let us begin.

 

1. HTML Markup

On this first step you will change the code that generates plone's default tabs. You will replace it with new code. This new code will produce the HTML markup that will include not only the top level tabs, but also the items inside folders.

 

In order to do that you must customize the template that Plone uses to generate the tabs: global_sections

.

 

This is done using Zope Management Interface (ZMI

) that is accessible through Plone's control panel.

 

On ZMI you must go inside the global_skins folder and there you must go inside the plone_templates

subfolder.

1c_look_for_global_sections.png

 

This is where you will find the global_sections

template. Please click on it.

1d_customize_global_sections.png

 

The contents of the default global_sections template will appear in grey. Please click on the Customize

button.

1e_erase_contents_of_global_sections.png

 

This will have created a customizable version of global_sections in your custom

folder.

 

At this point you must delete all the contents of the default template and replace them with one of two template codes, depending on which version of Plone you have.

 

Use the following code if you have version 2.1.x of Plone: better_global_sections_21x

 

 

If you are using Plone 2.5.x then use this code instead: better_global_sections_25x

 

 

The two files differ slightly in the part that retrieves the sitemap HTML markup from Plone, which has changed in Plone 2.5.

1f_new_global_sections.png

 

After pasting in the code that is right for your version of Plone you can click on the Save Changes

button.

 

I suggest you open a separate browser window to check out the resulting page.

1g_unstyled_result.png

 

In place of the standard Plone tabs you have now a list that looks almost like a sitemap. It doesn't look like tabs with menus and submenus yet but all the information we need is there.

 

2. CSS Styling

Now we must add the CSS styling to get the look we want.

 

We are going to use a method known as suckerfish. It is described in-depth at http://htmldog.com/articles/suckerfish/

and we are going to adapt it to the HTML markup used by Plone in the sitemap.

 

We start by going back to the ZMI. We open the plone_styles folder that is inside the portal_skins

folder.

2a_look_for_ploneCustom.png

 

Please click on the ploneCustom.css

file to see its default contents.

2b_customize_ploneCustom.png

 

Click on the Customize button so that this file is copied to your custom

directory where its contents can be changed.

2c_delete_placeholder_line.png

 

Do NOT delete its contents. Instead look for the line that says:

/* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */
and replace ONLY THAT LINE with the contents of the following file: better_ploneCustom.css

 

 

2d_insert_our_styling.png

 

After replacing that line with our CSS styling you can click on the Save Changes

button.

 

If you go back to the other browser window and reload the page you should finally see our tabs, menus, and submenus.

2e_styled_result.png

 

However you may see an error: "suckerfish is not defined". This results from the fact that our template trys to load a Javascript file needed for Internet Explorer 6 (and earlier) and we have not created it yet.

 

3. Support Internet Explorer 6

Indeed if you use Internet Explorer 6 now to see your site this is what you'll get:

 

3a_no_menus_in_IE.png

 

 

Even though you can see tabs with icons now, your menus do not appear under the tabs. This is because the CSS pseudo-class (:hover) used to show the menu of a tab is not supported in Internet Explorer 6 for the HTML tag (the LI tag) that contains tabs with menus.

 

To work around this problem we are going to use the javascript solution described in the suckerfish documentation, optimized as described in the suckerfish shoal. For more information about the multiple variations of suckerfish please check the following page: http://htmldog.com/articles/suckerfish/shoal/

 

 

Let's add the Javascript. Back on the ZMI you must add a new file to your custom folder that is inside the portal_skins

folder (the same place where the previous two customized files reside).

3b_add_DTML_Method.png

 

Add a file of type DTML Method

.

3c_name_new_method.png

 

In the ID field please type in suckerfish.js as the name of the new file. You don't have to type anything in the Title or File fields, just click on the Add and Edit

button.

3d_erase_default_content.png

 

Now select all the default content that was automatically put in the new file and delete it, replacing it with our suckerfish code that is on the following page: suckerfish.js

 

3e_insert_suckerfish.png

 

Click on the Save Changes

button, and go back to Internet Explorer 6 to see the results.

 

3f_final_result.png

 

 

There it is! Now the drop-down menus do appear even on this older browser, which happens to be the most widely used on the Internet, like it or not ;-)

 

Conclusion

This how-to was made as a result of sugestions made by other users of plone.org that they posted as comments to another how-to I've published a while back (Horizontal menu showing the contents of the selected Tab

). For the pull-down menu functionality that method used the Action Menu scripts that are built into Plone and as such they behaved like the editing action menus.

 

Even though the reason to use the suckerfish

method was the need to support Plone 2.5.x as well as 2.1.x, the most difficult part of this how-to for me was not the need to adapt the suckerfish method. Without a doubt the most difficult part was the need to support so many different web browsers that have many presentation variations, in some cases only possible to work around through trial and error as some of the quirky behavior of some browsers is not documented anywhere.

 

I was careful to have consistent behavior on Internet Explorer 5.5 and 6, as well as on the latest beta of Internet Explorer 7. I assumed that not many of you would want to alienate the vast majority of potencial visitors to your web site just to have drop-down menus.

 

I also made sure that the latest stable versions of Firefox, Opera, and Safari worked well, even though these browsers too have their issues that required some dancing around, in spite of their claim to be standards' compliant.

 

The next version of Plone will be 3.0. One of its areas of change will be the user interface, which I expect may incorporate a feature similar to the one described in this how-to.

 

In the mean time I hope that you find good use for this method in your customizations and skins.