OK, here goes. I'm only going to give the basics here:
Assuming you are skinning in HTML, you want two menus - horizontal main and vertical showing child pages of the current page.
In the html file, place these tokens in the menu locations:
[SOLPARTMENU:1] and [SOLPARTMENU:2]
In the xml file, define the attributes to be used for each menu:
<Object>
<Token>[SOLPARTMENU:1]</Token>
<Settings>
<Setting>
<Name>Display</Name>
<Value>Horizontal</Value>
</Setting>
<Setting>
<Name>SeparateCss</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>fontnames</Name>
<Value>Tahoma</Value>
</Setting>
<Setting>
<Name>fontbold</Name>
<Value>false</Value>
</Setting>
<Setting>
<Name>userootbreadcrumbarrow</Name>
<Value>false</Value>
</Setting>
<Setting>
<Name>usearrows</Name>
<Value>false</Value>
</Setting>
<Setting>
<Name>menucontainercssclass</Name>
<Value>MainMenu_MenuContainer</Value>
</Setting>
<Setting>
<Name>menubarcssclass</Name>
<Value>MainMenu_MenuBar</Value>
</Setting>
<Setting>
<Name>menuitemcssclass</Name>
<Value>MainMenu_MenuItem</Value>
</Setting>
<Setting>
<Name>submenuitemcssclass</Name>
<Value>MainMenu_SubMenu</Value>
</Setting>
<Setting>
<Name>menuitemactivecssclass</Name>
<Value>MainMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>menuitemselcssclass</Name>
<Value>MainMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>menuitembreadcrumbcssclass</Name>
<Value>MainMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>submenucssclass</Name>
<Value>MainMenu_SubMenu</Value>
</Setting>
<Setting>
<Name>menuiconcssclass</Name>
<Value>MainMenu_MenuIcon</Value>
</Setting>
<Setting>
<Name>menubreakcssclass</Name>
<Value>MainMenu_MenuBreak</Value>
</Setting>
<Setting>
<Name>menuarrowcssclass</Name>
<Value>MainMenu_MenuArrow</Value>
</Setting>
<Setting>
<Name>menurootarrowcssclass</Name>
<Value>MainMenu_RootMenuArrow</Value>
</Setting>
<Setting>
<Name>rootmenuitembreadcrumbcssclass</Name>
<Value>MainMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>rootmenuitemactivecssclass</Name>
<Value>MainMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>rootmenuitemselectedcssclass</Name>
<Value>MainMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>submenuitembreadcrumbcssclass</Name>
<Value>MainMenu_SubMenuSel</Value>
</Setting>
<Setting>
<Name>submenuitemselectedcssclass</Name>
<Value>MainMenu_SubMenuSel</Value>
</Setting>
<Setting>
<Name>submenuitemactivecssclass</Name>
<Value>MainMenu_SubMenuSel</Value>
</Setting>
<Setting>
<Name>leftseparator</Name>
<Value><img src="images/spacer.gif"></Value>
</Setting>
<Setting>
<Name>rightseparator</Name>
<Value><img src="images/menu_spacer.gif"></Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[SOLPARTMENU:2]</Token>
<Settings>
<Setting>
<Name>Display</Name>
<Value>Vertical</Value>
</Setting>
<Setting>
<Name>SeparateCss</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>Level</Name>
<Value>child</Value>
</Setting>
<Setting>
<Name>menualignment</Name>
<Value>left</Value>
</Setting>
<Setting>
<Name>fontnames</Name>
<Value>Tahoma</Value>
</Setting>
<Setting>
<Name>fontbold</Name>
<Value>false</Value>
</Setting>
<Setting>
<Name>userootbreadcrumbarrow</Name>
<Value>false</Value>
</Setting>
<Setting>
<Name>usearrows</Name>
<Value>false</Value>
</Setting>
<Setting>
<Name>menucontainercssclass</Name>
<Value>SideMenu_MenuContainer</Value>
</Setting>
<Setting>
<Name>menubarcssclass</Name>
<Value>SideMenu_MenuBar</Value>
</Setting>
<Setting>
<Name>menuitemcssclass</Name>
<Value>SideMenu_MenuItem</Value>
</Setting>
<Setting>
<Name>menuitemactivecssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>menuitemselcssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>menuitembreadcrumbcssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>submenucssclass</Name>
<Value>SideMenu_SubMenuItem</Value>
</Setting>
<Setting>
<Name>menuiconcssclass</Name>
<Value>SideMenu_MenuIcon</Value>
</Setting>
<Setting>
<Name>menubreakcssclass</Name>
<Value>SideMenu_MenuBreak</Value>
</Setting>
<Setting>
<Name>menuarrowcssclass</Name>
<Value>SideMenu_MenuArrow</Value>
</Setting>
<Setting>
<Name>menurootarrowcssclass</Name>
<Value>SideMenu_RootMenuArrow</Value>
</Setting>
<Setting>
<Name>rootmenuitembreadcrumbcssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>rootmenuitemactivecssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>rootmenuitemselectedcssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>submenuitemselectedcssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
<Setting>
<Name>submenuitemactivecssclass</Name>
<Value>SideMenu_MenuItemSel</Value>
</Setting>
</Settings>
</Object>
In the css file, style the menu classes for both menus:
/* Solpart Main (top) Menu */
.MainMenu_MenuContainer {
height: 24px;
line-height: 24px;
width: 768px;
border: 0px;
background-color: transparent;
background-image: url(images/menu_bak.gif);
background-repeat: no-repeat;
color: white;
}
.MainMenu_MenuBar {
cursor: pointer;
cursor: hand;
height: 24px;
background-color: transparent;
}
.MainMenu_MenuItem {
height: 24px;
background-color: transparent;
background-image: none;
cursor: pointer;
cursor: hand;
border-left: solid 0px #000000;
border-bottom: solid 0px #000000;
border-top: solid 0px #000000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: white;
font-weight: normal;
}
.MainMenu_MenuItemSel {
height: 24px;
background-image: none;
background-color: transparent;
cursor: pointer;
cursor: hand;
border-left: solid 0px #000000;
border-bottom: solid 0px #000000;
border-top: solid 0px #000000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #FF0000;
font-weight: normal;
}
.MainMenu_MenuIcon {
display: none;
}
.MainMenu_SubMenu {
height: 24px;
z-index: 1000;
cursor: pointer;
cursor: hand;
background-image: none;
background-color: #333333;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: white;
font-weight: normal;
border-top: solid 0px #000000;
border-right: solid 0px #000000;
border-bottom: solid 0px #000000;
border-left: solid 0px #000000;
}
.MainMenu_SubMenu .MainMenu_MenuItem {
height: 24px;
background-image: none;
background-color: #333333;
cursor: pointer;
cursor: hand;
border-left: solid 0px #000000;
border-bottom: solid 0px #000000;
border-top: solid 0px #000000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: white;
font-weight: normal;
}
.MainMenu_SubMenuSel {
height: 24px;
z-index: 1000;
cursor: pointer;
cursor: hand;
background-image: none;
background-color: #333333;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #FF0000;
font-weight: normal;
border-top: solid 0px #000000;
border-right: solid 0px #000000;
border-bottom: solid 0px #000000;
border-left: solid 0px #000000;
}
.MainMenu_MenuSep {
height: 24px;
background-image:url(menu_spacer.gif);
padding:0px;
width: 14px;
}
.MainMenu_MenuBreak {
background-color: transparent;
border-top: solid 0px #000000;
border-bottom: solid 0px #000000;
border-right: solid 0px #000000;
background-image:url(images/menu_spacer.gif);
padding-left: 0px;
padding-right: 0px;
width: 14px;
}
.MainMenu_MenuArrow {
border-right: solid 0px #000000;
border-bottom: solid 0px #000000;
border-top: solid 0px #000000;
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
.MainMenu_RootMenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: hand;
}
/* the Side Menu */
.SideMenu_MenuContainer {
width: 176px;
height: 25px;
border: 0px;
background-color: transparent;
background-image: url(images/submenu_container.gif);
background-position: center;
background-repeat: no-repeat;
color: White;
}
.SideMenu_MenuBar {
cursor: pointer;
cursor: hand;
width: 176px;
height: 25px;
background-color: transparent;
background-image: none;
}
/* menu items */
.SideMenu_MenuItem {
width: 176px;
height: 25px;
background-color: transparent;
background-image: url(images/sidebullet.gif);
background-position: 12px;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: white;
font-weight: normal;
text-indent: 18px;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
}
/* sub-menu items */
.SideMenu_SubMenuItem {
width: 176px;
height: 25px;
line-height: 25px;
background-color: #990000;
background-image: none;
cursor: pointer;
cursor: hand;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: white;
font-weight: normal;
text-indent: 18px;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
}
.SideMenu_MenuIcon {
display: none;
}
/* side menu items, selected */
.SideMenu_MenuItemSel {
width: 176px;
height: 25px;
background-color: transparent;
background-image: url(images/crumbbullet.gif);
background-position: 12px;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #FF0000;
font-weight: normal;
text-indent: 18px;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
}
.SideMenu_Selected {
width: 176px;
height: 25px;
background-color: transparent;
background-image: url(images/crumbbullet.gif);
background-position: 12px;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #FF0000;
font-weight: normal;
text-indent: 18px;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
}
.SideMenu_MenuBreak {
display: none;
}
.SideMenu_MenuArrow {
display: none;
}
.SideMenu_RootMenuArrow {
display: none;
}
There's a reason people pay to have this done...