collective.collage.megamenu 1.1.2

A mega drop down menu implementation using Products.Collage

Rough list of features

Plone implementation of a mega drop-down menu based on http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/.

Developed for Plone 3 and Plone 4.

Uses collective.collage.nested to support nested Collage objects.

Adds some actions in portal_actions/object_buttons:

1. Enable Megamenu: adds IMegamenuEnabled interface to current folder.
2. Current Megamenu: selects current folder as current megamenu (the one that will be displayed in plone.portalheader viewlet manager).
3. Disable Megamenu: removes IMegamenuEnabled interface to current folder.
4. Test Megamenu: shows a preview of the current megamenu-enabled folder as if it were the megamenu.

Collage layout-views for ATCTContent: menu and intro.

Collage renderer-views for Collage, Rows and Columns used inside the above layout-views. This is to provide cleaner HTML.

JavaScript and CSS resources to support megamenu. Special CSS for Plone classic theme (Plone 3 theme).

Native support for ATFolders (see atfolder.zcml) and plone.app.folder (ploneappfolder.zcm) and can be extended for other custom folder implementations.

How-to create a megamenu

1. Create a regular folder
2. Go to Actions | Enable Megamenu
3. Go to Actions | Current Megamenu to select the folder as the megamenu folder you want to display.
4. Create as many Link objects to internal or external URLs you want to include in megamenu as regular links (no drop-down). Description is rendered as title attribute.
5. Create as many Collage objects as items you want to show in your menu. Description is rendered as title attribute.
6. Add one related item in your Colage objects to provide a default link (for non-JavaScript enabled browsers).
7. Create as many rows and columns as you need in Collage and select the menu option in layout dropdown.
8. menu rows have several skins to display horizontal or vertical separating lines between rows and columns.
9. Create as many objects as you need in the columns and select the menu option in layout dropdown.
10. menu items have three skins to display just the title (no link), regular link or highlighted (strong) link.
11. Alternatively, you can select intro layout to provide more details: title, image and description.

Megamenu controlpanel

You can:

1. Enable / disable megamenu.
2. Select current megamenu folder (from all the folders providing IMegamenuEnable interface).
3. Choose whether you want to include drop-down HTML markup in the page or load it via AJAX.
4. Automatically hide all folder contents (and folder itself) when megamenu-enabling (by setting expiration date).
5. Automatically show all folder contents (and folder itself) when megamenu-disabling (by removing expiration date).

Screenshots

Collage description is shown as title. "Events" link highlighted with selected CSS class. Second column with highlighted news item with intro layout.

Three rows with one, two and three columns.

Horizontal and vertical line separators

Nested Collage: two columns, each of which with two rows.

Megamenu with classic theme working in Plone 3.

Installation

• Add collective.collage.megamenu to the list of eggs to install and extend to a known good set for plone.app.registry:

  [buildout]
  ...
  extends =
      ...
      http://good-py.appspot.com/release/plone.app.registry/1.0b2
  ...
  eggs =
      ...
      collective.collage.megamenu
  

• Tell the plone.recipe.zope2instance recipe to install a ZCML slug:

  [instance]
  recipe = plone.recipe.zope2instance
  ...
  zcml =
      collective.collage.megamenu
  

• Re-run buildout, e.g. with:

  $ ./bin/buildout
  

You can skip the ZCML slug if you are using Plone 3.3 or if you are going to explicitly include the package from another package's configure.zcml file.

Credits

Based on Mega Drop Down Menus w/ CSS & jQuery implementation by Soh Tanaka.

Changelog