May 2006
Typically, when designing and building DotNetNuke website skins, in particular regards to the standard menu navigation, there arises a need to apply styles to fit the overall design needs.
While many designers and website developers are familiar with the standard horizontal root-based menu on DotNetNuke websites, which tends to be a "telling brand" of all DNN based sites. Most are not aware of the other, simple setting changes for the SolPartMenu which can dramatically change the look and feel of the menu system, as well as break out of the mold that the vast majority of DNN websites find themselves within.
Contrary to popular knowledge, the SolPartMenu provides full capabilities for options including root menus, child menus, vertical displayed menus and more. Knowing these flexibilities exist leads the designer into better and more adaptable website skins, as well as more robust and friendly navigation systems not ordinarily realized by most DNN users.
This article provides a deeper insight, as well as a few suggestions into the standard, yet not so well known, attributes of the SolPartMenu Skin Object. Review each of these attribute settings in the section provided below:
Horizontal / Vertical Display
For scenarios which require a vertical menu, instead of the standard horizontal menu system, you can specify the display attribute within the
dnn:MENU tag in your skin. Changing this attribute will let you specify a menu that either stretches across your skin, or from top to bottom.
display="{values: vertical, horizontal (default value: horizontal)}
Example (ascx file):
<dnn:MENU runat="server" id="dnnMenu" display=”vertical”>
Example (skin.xml file):
<Object >
<Token>[MENU]</Token>
<Settings>
<Setting>
<Name>display</Name>
<Value>vertical</Value>
</Setting>
</Settings>
</Object>
Two-Level Menu
Sometimes its important to provide a menu navigation which displays only the current page, and the children of that page on the same menu navigation. Meaning, there is no drop-down menu, but rather a top-level menu line which is the current viewing level, and a second-level menu line, all link based. Solpart provides this too, with a structure that is familiar, and easy to follow. To use this type of menu, you need to set the
Forcedownlevel flag to True.
forcedownlevel={values: true | false (default value: false)}
Example (ascx file):
<dnn:MENU runat="server" id="dnnMENU" forcedownlevel=”true”>
Example (skin.xml file):
<Object>
<Token>[MENU]</Token>
<Settings>
<Setting>
<Name>forcedownlevel</Name>
<Value>true</Value>
</Setting>
</Settings>
</Object>
Site Map
While a menu system is essential, sometimes a Site Map, which contains a hierarchical list of all the links/pages within your site is useful for a more content based navigation, or for a more Search Engine friendly design. Site Maps are easy to create with the SolPartMenu control by setting the
forcefullmenulist attribute.
forcefullmenulist={values: true | false (default value: false)}
Example (ascx file):
<dnn:MENU runat="server" id="dnnMENU" forcefullmenulist=”true”>
Example (skin.xml file):
<Object>
<Token>[MENU]</Token>
<Settings>
<Setting>
<Name>forcefullmenulist</Name>
<Value>true</Value>
</Setting>
</Settings>
</Object>
Levels and Sub-Menu
The standard menu of DotNetNuke displays the root tabs/pages as the top level of the menu system. Many occasions call for a menu which is based at either the Parent of the current page, or possibly, as just the children of the current page, rather than the site root. This can be handled readily within SolPartMenu by setting the
level attribute.
level={values: Root | Same | Child (default value: Root)}
Example (ascx file):
<dnn:MENU runat="server" id="dnnMENU" level=”Same”>
Example (skin.xml file):
<Object>
<Token>[MENU]</Token>
<Settings>
<Setting>
<Name>level</Name>
<Value>Same</Value>
</Setting>
</Settings>
</Object>
Turn Off Sub Menus
While the standard drop-down capability of the SolPartMenu is keen, there are times which call for a more simplistic single level menu approach. If you desire a menu navigation system, which only displays the menu architecture which you have specified at the designated level (Root|Same|Child), you can control this by setting the
rootonly attribute.
rootonly={values: true | false (default value: false)}
Example (ascx file):
<dnn:MENU runat="server" id="dnnMENU" rootonly=”true”>
Example (skin.xml file):
<Object>
<Token>[MENU]</Token>
<Settings>
<Setting>
<Name>rootonly</Name>
<Value>true</Value>
</Setting>
</Settings>
</Object>
Delay the Sub Menu
Many users of SolPartMenu have experienced issues with an IE error while loading DotNetNuke web pages. This IE error, which reads “Operation Aborted” is caused due to a flaw in the rendering logic of IE, and occurs because of the dynamic rendering nature of the SolPartMenu.
IE fails to render properly if javascript alters the content of the data contained within a table cell at render time, during the same moment that mouse or user interaction occurs and results in this odd error. SolPartMenu provides a capability to correct this issue, by slightly delaying the render time for sub menus. This can be changed by setting the
delaysubmenuload attribute:
delaysubmenuload={values: true | false (default value: false)}
Example (ascx file):
<dnn:MENU runat="server" id="dnnMENU" delaysubmenuload=”true”>
Example (skin.xml file):
<Object>
<Token>[MENU]</Token>
<Settings>
<Setting>
<Name>delaysubmenuload</Name>
<Value>true</Value>
</Setting>
</Settings>
</Object>
About Bi4ce:
Bi4ce is a Microsoft Gold Certified Partner as well as a Gold DNN Benefactor specializing in rapid development and design of information technology solutions including custom skins and modules using the Microsoft .NET Framework, SQL Server and DotNetNuke (DNN). Click here to Request Information.