Enhancement

Add new properties to the Solpart Menu Skin Object to allow for more flexible styles and layouts.

User Story

When designing a skin and skinning the menu in particular there arises a need to apply proper styles to fit the overall design. The current implementation is too restrictive to allow for things like child menus, breadcrumb or active tab highlighing, custom arrows, separator strings, images, seperate css classes for root level and submenu rollovers, etc. By adding this flexibility The designer can create a skin the fits better with the overall design.

Acceptance Tests

Should allow for:
vertical displayed menus will now use a right facing arrow image on the root menu to indicate a submenu 
Get rid of default SelectedBorderColor if using seperatecss because this property could not be overridden in a seperate css file. It could still be set in the skin.xml file.

new attributes:
--level - select the level (in relation to the current tab) for the menu (Root, Same, Child). This allows for multiple dynamic menus (works like on Links skinobject) on the page such as a side navigation menu that shows child menu entries for example. (default="root")
-- rootonly - display root level menus with no child/dropdown/flyout menus (default=false)
--usearrows - boolean to turn the submenu arrow images on or off (default=true unless rootonly is true)
--userootbreadcrumbarrow - boolean to show breadcrumb image on active root level tab (default=true)
--rightarrow - image for right facing arrow (default=breadcrumb.gif)
--downarrow - image for down facing arrow (default=menu_down.gif)
--useskinpatharrowimages - skin independant menu arrow images. (default=false)
--usesubmenubreadcrumbarrow - boolean to show submenu breadcrumb image on submenu --level tab in breadcrumb tab array(default=false)
--rootmenuitemcssclass - css class applied to the root menu items (no default)
--rootbreadcrumbcssclass - css class applied to the root menu item found in the breadcrumb tab array(no default)
--submenubreadcrumbcssclass - css class applied to sub-menu items found in the breadcrumb tab array(no default)
--rootbreadcrumbarrow - image filename used root level breadcrumb arrow (default=breadcrumb.gif)
--submenubreadcrumbarrow - image filename used sub-menu level breadcrumb arrow (default=breadcrumb.gif)
--separator - separator string to use between root menu items.
--separatorcssclass - CSSclass for the separator string
--rootmenuitemselcssclass - CSS class to apply to root menu items on mouseover
--rootmenuitemactivecssclass - CSS class to apply to current/Active root menu items on mouseover. Takes precedence over rootbreadcrumbcssclass.
--submenuitemselcssclass - CSS class to apply to sub menu items on mouseover
--submenuitemactivecssclass - CSS class to apply to current/Active sub menu items on mouseover. Takes precedence over submenubreadcrumbcssclass.

Engineering Tasks

Request SolPart add ItemSelCSS property to the SolPart Menu control.
Add code to skinobject to simulate the necessary attributes for maximum flexibility.
Check each tab against the Breadcrumbs Array and apply itemlevel css classes for alternate highlighting methods/control.
Attend A Webinar
Free Demo Site
Download DotNetNuke Professional Edition Trial
Have Someone Contact Me

Like Us on Facebook Join our Network on LinkedIn Follow DNN Corporate on Twitter Follow DNN on Twitter

Owner

Jeremy White (JWhite)

DotNetNuke Corporation

DotNetNuke Corp. is the steward of the DotNetNuke open source project, the most widely adopted Web Content Management Platform for building web sites and web applications on Microsoft .NET. Organizations use DotNetNuke to quickly develop and deploy interactive and dynamic web sites, intranets, extranets and web applications. The DotNetNuke platform is available in a free Community and subscription-based Professional and Enterprise Editions with an Elite Support option. DotNetNuke Corp. also operates Snowcovered.com where users purchase third party apps for the platform.