| 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 |
|
|---|
| 9 |
(c) "Quintagroup":http://quintagroup.com/ , 2008. |
|---|
| 10 |
|
|---|
| 11 |
support@quintagroup.com * quintessence of modern business |
|---|
| 12 |
|
|---|
| 13 |
Requires |
|---|
| 14 |
|
|---|
| 15 |
Plone 3.0+ |
|---|
| 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> |
|---|
| 41 |
<li><a href="http://example.com/Members/mmajor">Mary Major</a><li> |
|---|
| 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 |
|---|
