You are here: Home Plone products Plone Drop Down Menu

Plone Drop Down Menu (3.0)

by Ihor Berehulyak last modified 2013-12-27
Released on 2010-07-14 by Quintagroup for Plone 4.0 under GPL - GNU General Public License available for All platforms.
Software development stage: stable
Plone Drop Down Menu product allows managing multilevel drop down menus in Plone. Drop down menu implemented by qPloneDropDownMenu Plone product is search engine friendly. You can easy change CSS in drop_down.css .
Plone Drop Down Menu

The product allows Plone websites to update multilevel portal dropdown menu and edit it within Plone. This is eggified version of old qPloneDropDownMenu product. It is compatible with Plone 4 only.


You have a list of items of your top level menu, which you can edit in 'drop down menu' configlet form. Now, to add submenu to the certain menu item, you need to add unordered list inside of top level menu item ('<li>...</li>') after its title ('<a></a>'):


Sample menu with 2 submenus. In this example we add submenus to 'Members', and 'Events' tabs:

<li id="portaltab-index_html" class="plain"><a href="" accesskey="t">Home</a></li>
<li id="portaltab-Members" class="plain"><a href="" accesskey="t">Members</a>
<li><a href="">John Doe</a><li>
<li><a href="">Mary Major</a></li>
<li id="portaltab-news" class="plain"><a href="" accesskey="t">News</a></li>
<li id="portaltab-events" class="plain"><a href="" accesskey="t">Events</a>
<li><a href="">Past Events</a></li>
<li><a href="">Calendar</a></li>

Customize the following elements in your's css files to change the appearance of drop down menu:

  • #portal-globalnav - global navigation bar
  • #portal-globalnav .csshover li.plain a, #portal-globalnav li a - global navigation link
  • #portal-globalnav .csshover li.plain a:hover, #portal-globalnav li a:hover - global navigation link hover
  • #portal-globalnav .csshover li.plain ul, #portal-globalnav li ul - global navigation drop-down box
  • #portal-globalnav .csshover li.plain ul li a, #portal-globalnav li ul li a - global navigation drop-down link
  • #portal-globalnav .csshover li.plain ul li a:hover, #portal-globalnav li ul li a:hover - global navigation drop-down link hover

You can click button on drop down menu configlet form to reset menu. This can be useful in case html of menu code is broken. Generated code is based on status of 'Automatically generate tabs' in your 'Navigation settings'. However you will lose your previous code of menu with all submenus after click on 'regenerate menu'.

Document Actions
Powered by Plone