Implementing advanced website navigation features

Do the following to implement a mega drop-down:

1. Ensure that each parent navigation item or its first child in the sitemap has a value for Content or URL to Link to. Otherwise, the navigation hierarchy may not render properly.
2. Edit the website theme's skin file
Click for details
1. Using your preferred text editor, find and open the website theme’s skin file (for example, Austin.skin). Skin files, by default, are located in the theme folders within C:\Program Files\ASI\iMIS\Net\App_Themes.
2. Find one of the following:
   • pageNavR - Update this control if you are using a non-Theme Builder theme, such as Austin. Any non-Theme Builder theme is a theme that was created not using Theme Builder.
   • PrimaryNavigation - Update this control if you are using a Theme Builder theme.
3. Update the correct control (either pageNavR or PrimaryNavigation) to the following:

EnableMegaDropDownMenu="true"

4. (optional) If you are familiar with skin controls, you can configure how the mega drop-down behaves by altering the following properties:
   • EnableMegaDropDownMenu – Enables the mega drop-down.
   • MegaDropDownMenuShowStartingNode – Displays the parent navigation node as the first item in the mega drop-down. Enter true or false.
   • MegaDropDownMenuLevelSettingLevel – This property sets specified menu nodes per level with a default per level of "1", and a minimum per level of "1". This property defines the navigation level at which the number of columns set for MegaDropDownMenuRepeatColumns starts to take effect. For example, if you set MegaDropDownMenuRepeatColumns="3" and set MegaDropDownMenuLevelSettingLevel="2", then the mega drop-down displays three columns for the second navigation level and higher, and the first level has one column only.

     📘 Note

     For out-of-the-box responsive themes, your navigation will not show in the responsive site mega drop-down if you have more than three levels of navigation. However, they will be displayed in the secondary navigation.

   • MegaDropDownMenuRepeatColumns – Defines the number of columns used to display the navigation. This property sets the number of display columns for the mega drop-down menu’s specified number of columns (default is "2", minimum is "2").
   • MegaDropDownTooltipLocation – This option only applies to tooltips defined for top-level navigation items in the primary navigation. When defined, it specifies the location of the tooltip text if a tooltip is defined for that navigation item. Enter either Menu (displays the tooltip directly beneath the top-level navigation item) or Append (displays to the right of the navigation text within the drop-down). If you do not define this property, navigation tooltips are not displayed in the drop-down.
   • MegaDropDownMenuRepeatDirection – This property sets the mega drop-down menu repeat direction and determines the order in which items are rendered as either Horizontal or Vertical (default is Vertical). If set to Vertical, the items display in columns loaded from top to bottom, then left to right, until all items are rendered. If set to Horizontal, the items display in rows loaded from left to right, then top to bottom, until all items are rendered.
3. Edit the theme’s menu CSS to tailor the display of the mega drop-down for the theme’s look and feel.
Click for details

• Using your preferred text editor, find and open the website theme’s menu CSS file (for example Menu.Aspen.css). Menu CSS files, by default, are located in the theme folders within C:\Program Files\ASI\iMIS\Net\App_Themes.

  📘 Note

  The styling for the Austin drop-downs are included in 99-Austin.css.

• Find the MegaDropDownMenu Styling section and edit the styles as needed:

  /* ########################## */
  /*  MegaDropDownMenu Styling  */
  /* ########################## */
  
  .RadMenu .rmGroup .MegaDropDownMenuOuter .rmText {
  	padding: 0;
  	margin: 0;
  	width: 600px !important;
  }
  
  div.MegaDropDownMenu
  {
  	background-color: #f8f7f7;
  	padding-left: 5px !important;
  	padding-right: 5px !important;
  }
  
  .MegaDropDownMenuToolTip
  {
  	padding: 5px;
  }
  

You are able to make changes to the layout and look of your mega drop-downs. You can add control properties in the .skin file, and you can add custom CSS classes.

For example, you could style your mega drop-down to look like the following

To create a mega drop-down that looks like this, you would first set one of the following control properties in the .skin file:

• pageNavR - Update this property if you are using a non-Theme Builder theme. A non-Theme Builder theme is any theme created not using Theme Builder, such as Austin, London, or Toronto.
• PrimaryNavigation - Update this property if you are using a Theme Builder theme, such as Great Barrier Reef Responsive.

For example, for the Austin theme, you would edit the Austin.skin file with the following bolded changes:

<asi:PageNavR runat="server" Skin="Austin" EnableEmbeddedSkins="false" EnableRootItemScroll="false"
	Flow="Horizontal" DefaultGroupSettings_Flow="Vertical"
	DefaultGroupSettings_OffsetX="0" Width="100%"
	EnableMegaDropDownMenu="true"
MegaDropDownMenuShowStartingNode="false"
MegaDropDownMenuLevelSettingLevel="0"
MegaDropDownMenuRepeatColumns="3"
MegaDropDownTooltipLocation="Append"/>

Next, add custom CSS classes to the 99-Austin.css file:

.SiteBuilderNode:before {
		padding-right: 5px;
	content: url(http://lorempixel.com/output/city-q-c-550-100-5.jpg);
}

.ManageSitemapNode:before {
		padding-right: 5px;
	content: url(http://lorempixel.com/output/city-q-c-175-75-6.jpg);
}

.ManageSitemapNode:after {
		padding-right: 5px;
		font-style: italic;
		float:right;
	content: "Some text describing something about the navigation and image";
}

.ManageWebsitesNode:before {
		padding-right: 5px;
	content: url(http://lorempixel.com/output/city-q-c-175-75-3.jpg);
}

.ManageWebsitesNode:after {
		padding-right: 5px;
		font-style: italic;
		float:right;
	content: "Text describing something about the navigation and image";
}

.ManageShortcutsNode:before {
		padding-right: 5px;
	content: url(http://lorempixel.com/output/city-q-c-175-75-9.jpg);
}

.ManageShortcutsNode:after {
		padding-right: 5px;
		font-style: italic;
		float:right;
	content: "Describing something about the navigation and image";
}