Dear DNN-guys
Before I give some explaination about the MenuBreak look at the rendering of the code of a working menu with different parts (only things that give the layout).
For a good understanding I've gived the following names for the different classes.
Settings |
Own Settings |
Default Settings |
|
|
|
RightArrow |
ArrwRght.gif |
breadcrumb.gif |
DownArrow |
ArrwDown.gif |
menu_down.gif |
rootbreadcrumbarrow |
RtMnItBrArrw.gif |
No default value |
submenubreadcrumbarrow |
SuMnItBrArrw.gif |
No default value |
leftseparator |
<![CDATA[<img title="" alt="" src="RtMnItLeSeNo.gif" />]]> |
|
leftseparatoractive |
<![CDATA[<img title="" alt="" src="RtMnItLeSeAc.gif" />]]> |
|
leftseparatorbreadcrumb |
<![CDATA[<img title="" alt="" src="RtMnItLeSeBr.gif" />]]> |
|
rightseparator |
<![CDATA[<img title="" alt="" src="RtMnItRiSeNo.gif" />]]> |
|
rightseparatoractive |
<![CDATA[<img title="" alt="" src="RtMnItRiSeAc.gif" />]]> |
|
rightseparatorbreadcrumb |
<![CDATA[<img title="" alt="" src="RtMnItRiSeBr.gif" />]]> |
|
rootmenuitemlefthtml |
<![CDATA[<img title="" alt="" class="RtMnItLeHtml" src="/--path--/RtMnItLeHtml.gif">]]> |
|
rootmenuitemrighthtml |
<![CDATA[<img title="" alt="" class="RtMnItRiHtml" src="/--path--/RtMnItRiHtml.gif">]]> |
|
separator |
<![CDATA[<img title="" alt="" src="RtMnItMiSprt.gif" />]]> |
|
submenuitemlefthtml |
<![CDATA[<img title="" alt="" src="/--path--/SuMnItLeHtml.gif">]]> |
|
submenuitemrighthtml |
<![CDATA[<img title="" alt="" src="/--path--//SuMnItRiHtml.gif">]]> |
|
|
|
|
separatecss |
true |
true |
userootbreadcrumbarrow |
true |
true |
useskinpatharrowimages |
true |
false |
usesubmenubreadcrumbarrow |
true |
false |
usearrows |
true |
true |
|
|
|
menubarcssclass |
MnBar |
MainMenu_MenuBar |
menucontainercssclass |
MnCntr |
MainMenu_MenuContainer |
menubreakcssclass |
MnBreak |
MainMenu_MenuBreak |
menuiconcssclass |
MnIcon |
MainMenu_MenuIcon |
menuitemcssclass |
RtAndSuMnItNo |
MainMenu_MenuItem |
menuitemselcssclass |
RtAndSuMnItHo |
MainMenu_MenuItemSel |
rootmenuitemcssclass |
RtMnItNo |
No default css class |
rootmenuitemselectedcssclass |
RtMnItHo |
No default css class |
rootmenuitemactivecssclass |
RtMnItAc |
No default css class |
rootmenuitembreadcrumbcssclass |
RtMnItBr |
No default css class |
submenucssclass |
SuMnCntr |
MainMenuSubMenu |
submenuitemactivecssclass |
SuMnItAc |
No default css class |
submenuitemselectedcssclass |
SuMnItHo |
No default css class |
submenuitembreadcrumbcssclass |
SuMnItBr |
No default css class |
menurootarrowcssclass |
RtMnItArrw |
MainMenu_MenuRootArrow |
menuarrowcssclass |
SuMnItArrw |
MainMenu_MenuArrow |
|
|
|
leftseparatorcssclass |
RtMnItLeSeNo |
No default css class |
leftseparatoractivecssclass |
RtMnItLeSeAc |
No default css class |
leftseparatorbreadcrumbcssclass |
RtMnItLeSeBr |
No default css class |
separatorcssclass |
RtMnItMiSprt |
No default css class |
rightseparatorcssclass |
RtMnItRiSeNo |
No default css class |
rightseparatoractivecssclass |
RtMnItRiSeAc |
No default css class |
rightseparatorbreadcrumbcssclass |
RtMnItRiSeBr |
No default css class |
I use this classes because they says more than the name of the classes that are used in the documentation.
[1 :: First MenuBreak]
<tr>
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="RtMnItLeSeAc"><img alt="leftseparatoractive" src="RtMnItLeSeAc.gif"></td>
</tr>
</tbody>
</table>
</td>
[2 :: First MenuItem with a submenu]
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItAc" savecss="RtMnItAc" saveselcss="RtMnItHo" style="">
<td title="Home" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif"><img alt="*" src="RtMnItBrArrw.gif" border="0">Home<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif"></td>
<td class="spmrarw RtMnArrw" align="right"><img src="ArrwDown.gif" alt=">">
</td>
</tr>
</tbody>
</table>
</td>
[3 :: MenuBreak betweek first and second menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="RtMnItRiSeAc"><img alt="rightseparatoractive" src="RtMnItRiSeAc.gif"></td>
<td class="RtMnItMiSprt"><img alt="separator" src="RtMnItMiSprt.gif"></td>
<td class="RtMnItLeSeNo"><img alt="leftseparator" src="RtMnItLeSeNo.gif"></td>
</tr>
</tbody>
</table>
</td>
<td>
[4 :: Second MenuItem with a submenu]
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItNo" savecss="RtMnItNo" saveselcss="RtMnItHo">
<td title="Organisatie" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif">Organisatie<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif"></td>
<td class="spmrarw RtMnArrw" align="right"><img src="ArrwDown.gif" alt=">">
</td>
</tr>
</tbody>
</table>
</td>
[5 :: MenuBreak betweek second and third menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="RtMnItRiSeNo"><img alt="rightseparator" src="RtMnItRiSeNo.gif"></td>
<td class="RtMnItMiSprt"><img alt="separator" src="RtMnItMiSprt.gif"></td>
<td class="RtMnItLeSeNo"><img alt="leftseparator" src="RtMnItLeSeNo.gif"></td>
</tr>
</tbody>
</table>
</td>
[6 :: Third MenuItem with a submenu]
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItNo" savecss="RtMnItNo" saveselcss="RtMnItHo">
<td title="Engineering" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif">Engineering<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif"></td>
<td class="spmrarw RtMnArrw" align="right"><img src="ArrwDown.gif" alt=">">
</td>
</tr>
</tbody>
</table>
</td>
[7 :: MenuBreak between third and fourth menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="RtMnItRiSeNo"><img alt="rightseparator" src="RtMnItRiSeNo.gif"></td>
<td class="RtMnItMiSprt"><img alt="separator" src="RtMnItMiSprt.gif"></td>
<td class="RtMnItLeSeNo"><img alt="leftseparator" src="RtMnItLeSeNo.gif"></td>
</tr>
</tbody>
</table>
</td>
[8 :: Fourth MenuItem (and last) no submenu]
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItNo" savecss="RtMnItNo" saveselcss="RtMnItHo">
<td title="Klanten" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif">Klanten<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif">
</td>
</tr>
</tbody>
</table>
</td>
[9 :: Last MenuBreak after fourth menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="RtMnItRiSeNo"><img alt="rightseparator" src="RtMnItRiSeNo.gif"></td>
</tr>
</tbody>
</table>
</td>
[10 :: Last MenuBreak after fourth menuitem]
<td width="100%"><img src="spacer.gif"></td>
</tr>
In this example you can see:
The before the Name of the menuitems are not there... That's why I've eleminated this in de solpart.js script.
But you can also see that I've not elimated the returns in the second td-tag... for the menuitems. Take a close look...
You can also see that I've used a name for each element that is easy to understand (also the same name for the gifs as for the elements).
As we look now closer to the MenuBreak then you can see the difference between the Menubreaks.
1 :: have only one separator. The first menu is active. The RtMnItLeSeAc occurs.
3 :: have tree separators.
The first is right from the first menu and is active because this separator belongs to the first menu. RtMnItRiSeAc occurs.
The second is the separator between the two MenuItems. I've named it RtMnItMiSprt (RootMenuItemMiddleSeparator)
The third is left from the second menu and is not active this separator belangs to the second menu. RtMnItLeSeNo occurs.
5, 7 are the same.
9 :: have only one separator at the right side of the last menuitem.
10 :: is a supplementary td-tag so that the items comes together.
As you can see with these menuitems you can make fine rootmenus... tabsmenu's ...
Of course I must examine the submenu... Another day perhaps... As you wish it?...
I hope this was usefull.