Blog

Adammer NavMenu Documentation

October 6th, 2011

Overview

The Adammer CSS NavMenu creates unordered lists that are styled entirely by CSS for displaying navigation within our custom and commercial DotNetNuke skins.

The hover/fly-out solution is modeled after “Son of Suckerfish” using embedded unordered lists. This solution does not require any external JavaScript. Set navType="Hover" for this type of menu.

Using the NavMenu in Our Skins

To use the Adammer NavMenu skin object in our skins you need only register it and include the tag that calls it in the skin .ascx file:

<%@ Register TagPrefix="Adammer" Namespace="Adammer.DNN.Skins" Assembly = "Adammer.DNN.NavMenu" %>
 
<Adammer:NavMenu id="nav" Level="0-0" Type="Tabs" ExcludeTabs="Admin,Host" runat="server" />

The two lines above will display the top-level (parent) tabs from the portal. To include additional levels, you add additional properties that identify the levels and feature you want displayed.

The line below will display the first through third level under the parent tabs (which are at level zero):

<Adammer:NavMenu id="nav" Level="1-3" Type="Tabs" ExcludeTabs="Admin,Host" runat="server" />

Always specify the Level with a starting and ending range, even if it is only one level that you want to display. Along with the Level property, there are additional properties to control the NavType of the menu, along with ExcludeTabs and IncludeTabs, which will assist in keeping only the tabs that you want to be rendered on a specific menu instance.

Property Definitions

ID – Set this property to place an ID on the rendered control. This is needed to reference the different instances of the control in the CSS file.

Level – A number from 0 to n to identify what level of tabs should be displayed. Specify this setting with a starting and ending level. Level=”0-0″ will only display the root tabs. Level=”1-3″ will display the 1st through 3rd levels.

NavType -

Tabs – Will display a list of your links that can be configured to look like tabs that are defined in the CSS file. The vertical or horizontal orientations are accomplished through CSS mostly by setting a width on the main container.

ActiveChildTabs – Used for displaying a list of tabs that has the currently active tab as a parent.

Hover – Used if you want to set the menu to use embedded Unordered Lists with detection to add the mouse-overs for IE browsers.

SelectList – Can be used to display all of the tabs in a single select box.

Template – The template type of menu allows you to specify an external template file so that you can completely configure the output of the menu including layout, styles, etc.

IncludeTabs – A list of tab names separated by commas that would be the only ones loaded in this instance of the control.

ExcludeTabs – A list of tab names separated by commas that will be excluded from all the other tabs that are loaded in this instance of the control.

Note: you can also use regular expressions to define includes and excludes for your menus.

CacheTabs – If set to true will cache the tab generation process so that the menu does not have to be rebuilt on every request. Set this to true after you have your menu working like you want.

DisplayIcon – If set to true it will use the Icon file that is assigned to the Page in Page Settings.

HideTabName – If set to true, this property will hide the name of the tab. This is usually used in conjunction with the DisplayIcon setting to make image type menus.

HideTabNamesByLevel – Set this to a range of levels that you want to hide tab names on. This is useful for displaying images on the parent, and still showing the names on child menus.

ShowHiden – If set to true, this property will also include tabs/pages in the menu that have been set to hidden in the Page Settings.

OnlyExpandActive – Set this to true if you want the child items in a single instance to only be shown after the parent is clicked. This is usually used in a vertical navigation to give the navigation the feel of an expanding type tree.

DisplayRoles – A list of security role names separated by commas that will be allowed to see this instance of the menu. This allows you to display different menus for different roles. This property can also use RegEx wildcards.

Example: DisplayRoles="IT_.*" will display the menu instance for any user in a Role that begins with “IT_”.

DisplayPaths – A list of URL paths separated by commas that will be allowed to see this instance of the menu. This allows you to display different menus for different URLs. This property can also use RegEx.

Example: "forums.*", will allow this instance of the menu to only be displayed if the URL has “Forums” in it).

Replacements – A comma separated list of search=replace pairs. This is useful if you don’t like something about the output of the menu, but don’t have access to change it through some other property. This property can also use RegEx.

Example: If you wanted to replace the word Home with the word Start you would use Replacements="Home=Start".

TemplateFile – Specify the Filename of the Template to be used for this instance.

ShowType – This property was added to support using two instances of the menus on the same page as in the case when you want to display root navigation in one instance and child navigation in another, with the child instance only displaying the links for the currently active root.

Note: This setting is only valid when using the "Tabs" NavType.

WithActiveParent – This value will render all the active children of the currently active tab. If you are using two instances of the menu (one for parent and one for child, then you will most likely set ShowType="WithActiveParent" on your child menu.

ChildrenOnly – This value will make the menu show only the children of the tabs specified in the IncludedTabs property. It is useful if you want to target a specific section of the tab hierarchy.

Always – This will make the menu always render whatever levels are specified. It is the default and is not normally set explicitly.

Creating Hover Fly-out Navigation (Suckerfish)

Example CSS Used in Hover Type Menu:

/*-- Set bottom margin and color of menu that does not contain menu items --*/
#nav ul {padding:0px; margin:0px; list-style:none; float:left; width:100%; background:transparent;}
 
/*-- Set line height --*/
#nav li {position:relative; float:left; line-height:12px; list-style:none; padding:0px; margin-bottom:0px; background-color:transparent}
 
/*-- Font for top menu items --*/
#nav a {font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:12px; display:block; margin:0; text-decoration:none; text-align:center; padding:0 20px 0 18px; margin:0px; color:#000; background:#CCC url(graphics/menu_divide.gif) right center no-repeat; line-height:26px;}
 
/*-- Second-level list container --*/
#nav li ul {position:absolute; left:-999em; width:167px; border-top:#999 1px solid; border-left:1px solid #999; z-index:1000}
 
/*-- Second-level menu items --*/
#nav li li a { width:150px; font-size:11px; text-align:left; background:#E6E6E6 none; color:#222; border-right:1px solid #999; border-bottom:#999 1px solid; line-height:16px; padding:6px 6px 6px 10px; text-transform:none; font-family:Verdana, Geneva, sans-serif; font-weight:normal;}
 
/*-- Hover style for menu items --*/
#nav li a:hover {background: #FAFAFA none; color:#000;}
 
/*-- Top-level selected menu items --*/
#nav li.SelectedTab a {}
 
/*-- Second-level selected menu items --*/
#nav li li.SelectedTab a {background:#CCC none; color:#222;}
 
/*-- Third-level selected menu items --*/
#nav li li li.SelectedTab a {background: #CCC none; color:#222;}
 
/*-- Hover style for selected menu items --*/
#nav li.SelectedTab a:hover {background: #FAFAFA none; color:#000;}
 
/*-- Font color for disabled tabs --*/
#nav .DisabledTab {color:#CCC;}
 
/*-- No need to change these hover classes unless you need more than 4 levels --*/
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{left: -999em;}
 
/*-- Set where the first drop-down hover menu starts along the y axis --*/
#nav li:hover ul,
#nav li.iehover ul {top: 26px;left:-1px;}
 
/*-- Set where the first drop-down hover menu starts along the x axis --*/
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul,
#nav li li li.iehover ul {top: 2px;left:166px;}

The Adammer CSS NavMenu is licensed through Snapsis Software.

  1. No comments yet.
  1. No trackbacks yet.
Subscribe to comments feed Secure this form