[1] | 1 | Quintagroup Plone Drop Down Menu |
---|
| 2 | |
---|
| 3 | The product allows Plone websites to update multilevel portal |
---|
| 4 | dropdown menu and edit it within Plone. |
---|
| 5 | |
---|
| 6 | "Product Homepage":http://quintagroup.com/services/plone-development/products/ | |
---|
| 7 | "Download":http://sourceforge.net/projects/quintagroup |
---|
| 8 | |
---|
[372] | 9 | (c) "Quintagroup":http://quintagroup.com/ , 2008. |
---|
[1] | 10 | |
---|
| 11 | support@quintagroup.com * quintessence of modern business |
---|
| 12 | |
---|
| 13 | Requires |
---|
| 14 | |
---|
[372] | 15 | Plone 3.0+ |
---|
[1] | 16 | |
---|
| 17 | Install |
---|
| 18 | |
---|
| 19 | 1. Install with Quick Installer. |
---|
| 20 | |
---|
| 21 | 2. For Plone below 2.1 to use drop_down.css add '<dtml-var drop_down.css>' |
---|
| 22 | line to your portal ploneCustom.css. |
---|
| 23 | |
---|
| 24 | Usage |
---|
| 25 | |
---|
| 26 | You have a list of items of your top level menu, which you can edit in |
---|
| 27 | 'drop down menu' configlet form. Now, to add submenu to the certain |
---|
| 28 | menu item, you need to add unordered list inside of top level menu |
---|
| 29 | item ('<li>...</li>') after its title ('<a></a>'):: |
---|
| 30 | |
---|
| 31 | <ul><li>...</li>...<li>...</li></ul> |
---|
| 32 | |
---|
| 33 | To make your changes live click 'save' button. |
---|
| 34 | |
---|
| 35 | Sample menu with 2 submenus:: |
---|
| 36 | |
---|
| 37 | <li id="portaltab-index_html" class="plain"><a href="http://example.com/" accesskey="t">Home</a></li> |
---|
| 38 | <li id="portaltab-Members" class="plain"><a href="http://example.com/Members" accesskey="t">Members</a> |
---|
| 39 | <ul> |
---|
| 40 | <li><a href="http://example.com/Members/jdoe">John Doe</a><li> |
---|
[893] | 41 | <li><a href="http://example.com/Members/mmajor">Mary Major</a></li> |
---|
[1] | 42 | </ul> |
---|
| 43 | </li> |
---|
| 44 | <li id="portaltab-news" class="plain"><a href="http://example.com/news" accesskey="t">News</a></li> |
---|
| 45 | <li id="portaltab-events" class="plain"><a href="http://example.com/events" accesskey="t">Events</a> |
---|
| 46 | <ul> |
---|
| 47 | <li><a href="http://example.com/events/previous">Past Events</a><li> |
---|
| 48 | <li><a href="http://example.com/calendar">Calendar</a><li> |
---|
| 49 | </ul> |
---|
| 50 | </li> |
---|
| 51 | |
---|
| 52 | In this example we added submenus to our 'Members', and 'Events' tabs. |
---|
| 53 | |
---|
| 54 | |
---|
| 55 | Customize the following elements in your's css files to |
---|
| 56 | changed the appearance of drop down menu: |
---|
| 57 | |
---|
| 58 | * #portal-globalnav - global navigation bar |
---|
| 59 | * #portal-globalnav .csshover li.plain a, #portal-globalnav li a - global navigation link |
---|
| 60 | * #portal-globalnav .csshover li.plain a:hover, #portal-globalnav li a:hover - global navigation link hover |
---|
| 61 | * #portal-globalnav .csshover li.plain ul, #portal-globalnav li ul - global navigation drop-down box |
---|
| 62 | * #portal-globalnav .csshover li.plain ul li a, #portal-globalnav li ul li a - global navigation drop-down link |
---|
| 63 | * #portal-globalnav .csshover li.plain ul li a:hover, #portal-globalnav li ul li a:hover - global navigation |
---|
| 64 | drop-down link hover |
---|
| 65 | |
---|
| 66 | |
---|
| 67 | You can click button on 'drop down menu' configlet form to reset menu. |
---|
| 68 | This can be usefull in case broken html of menu code. Generated code is based |
---|
| 69 | on status of 'Automatically generate tabs' in your 'Navigation settings' |
---|
| 70 | (in Plone 2.1+). However you will lose your previous code of menu with all submenus |
---|
| 71 | after click on 'regenerate menu'. |
---|
| 72 | |
---|
| 73 | If you want to 'regenerate menu' you should pay attention to status of |
---|
| 74 | 'Automatically generate tabs' in your 'Navigation settings' (in Plone 2.1+). |
---|
| 75 | |
---|
| 76 | |
---|
| 77 | Authors |
---|
| 78 | |
---|
| 79 | * Vitaliy Podoba |
---|