Installation File

Installation file :

New in version 1.4.4

New in version 1.3.9

New in version 1.3.2

New in version 1.2.9_4

INSTALLATION

Usage(Module Settings):

SKINOBJECT VALUES

USE WITH HTML SKIN

Replace Solpart, NAV Menu (Using as SkinObject mode)

Insert the menu into Your Skin file

Making change in XML setting file doesn’t applied

Create new style ( when you decide to create your new style)

How to change height HorizontalTab14 styles.

How to make CSSdropdown work with IE7,IE8 (important)

Installation file :

After unzip the download package , you will get the file navigation suite 1.3.9.x.zip, that is a installation file and don’t unzip further.

New in version 1.4.4

+Added provider for Ventrian Property Agent (special thank to José for this contribution)

+Ability to read style folder in skin’s folder or in each sub Portal folder

+ Check all styles for XHTML compliancy and legacy DTD HTML 4.0 (menu styles will passed the compliant test)

+Added some more CSS-based cool styles “Flicker”,Adobe, MTV,.. from

New in version 1.3.9

+Fix bug with “View” right

+Implement Localization for Setting page

+Fix error with “select scope “ for vertical menu

+Added styles

New in version 1.3.2

+ Add caching for menu, so reduce a lot of time if a page loaded the second time

+Implement Iportable Interface

+Support disable pages

+Added styles

New in version 1.2.9_4

+ Ability to select which tabs are visible in the menu. This will be useful to have a 2 or more menus on the same page. In settings, you could pick which tabs should show in which menu.

+ Horizontal 15 template now can wrap top level (useful when you need long tab name and have numerous top level tab). By set “Wrap” in description field, you can manually put the Tab to another row which allow total look and feel control.

+Added a client side expand-collapsible vertical menu (sub menu will be showed without reload page)

+Added 2 dynamic menu Pure CSS style (one vertical flyout and one dropdown based other style from this site can be easily added, require simple step to configure your Dotnetnuke in order to those menus work with IE7 )

+One colorful style for those who need difference color for each session of web site.

+Added 2 artist menu styles: Sliding Image menu (one level only)

For each page that you want it to link to from a graphic, add the graphic name (i.e. pic.jpg) in the description location of the page settings.

Image use for each Tab are set by description field:

Several Images are included in the style as follow:

ImageMenu_slide:

You can using FTP to upload your images, photos for use with Image Menu to folder:

Destopmodules/CISS.SideMenu/styles/ImageMenu_slide

New in version 1.2.7

+ No Admin and Host Items menu (for shorter menu when logged as admin or host user).

+Admin + Host only for admin purpose (put in admin skin,…)

+Another better mouse hover horizontal model (HorizonTab6_hover), submenu items can be manually adjust to appear only bellow related top level menu.

Adjust position of submenu by adding: adjust=15 or adjust=25 on Description Field of Tab level 0
15 or 25 should understand as 15% and 25%, which submenu will start at 15% or 25% across

menu wide

New in version 1.2.6

+Ability to select root of menu (scope of display)

+Added one bar only model

+Added one arrow vertical

+Added bulleted vertical model

New in version 1.2.4

+Display all sibbling of direct parent (vertical style)

+Added one mouse hover style

+Added “Son of suckerfish” dropdown

New in version 1.2

Added attribute “HaveChildren” for each Tab node in XML structure

Fix minor javascript error when using Horizontal style.

Add <a link> Css class to for consistence look (vertical styles)

Added 3 more Horizontal styles.

Upgrade from ealier version

Please backup your current style, xml settings in Desktopmodules/CISS.Sidemenu folder because files with the same name in this folder will be overwritten . So if you have not rename existings style and xml file before, make sure you do this step and copy them back after installing.

INSTALLATION

Use Host->Module Definitions-> InstallNew Modules or Upload New module to install this module.

DOTNETNUKE 4.X

Step 1: Installation

If there is no “Install New Feature” link, you can Host->Module Definitions-> InstallNew Modules to install this module.

Usage(Module Settings):

Step 1:Place CISS.SideMenu module on your page.

Step 2:Choose display style for the menu by modifying settings of this module.

You will find a session “Menu Settings”.

Use Tab’s Title: This option will enable the menu to choose Tab’s Title to display , allow you to choose a short, easy to remember Tab’s name for Url link. If your tab’s Name using non English languages, try this option!

Max level: Max level to display

Width: Control the width of the menu to fit with your skin. Can be 100%, 90% or 176px… If you are using horizontal style , normally you should use 100%.

DisplayHidenPages: The menu will display hidden pages, in some scenarios, you might want to use this menu as a vertical menu along with Solpart menu as a horizontal menu. Some people might use solpart menu as “root only” bar menu and use other menu (this one) as vertical menu which display hidden pages.

Start from Level: can be choose between 1 or 2 only. ( use for vertical menu for synchronize with horizontal when you using both horizontal and vertical in the same page.) When you use this setting, make sure the Select root setting isdefault.Thissettingcan be useful in case you want to have a menu bar (doesn’t have dropdown) and want to show a submenu on the left or right of page, showing submenu under the top menu item (level 0).

Expand: Expand all items to the deep specifying by Deep value (for vertical style), regardless what is the current page, this case user can easily see all pages in the menu as all nodes are expanded to show their childs.

Deep: use when expand set to Trueonly, how many levels from the level0 should be show up in an expanded menu. (don’t use this for horizontal menus)

Select root: There are 3 options :

+[DEFAULT] menu will display as normal

+[Active Tab as ROOT] menu always display items which are child of current Tab

+[ADMIN and HOST Items only] menu always display Admin and Host items

+[A specific tab ROOT] menu always display items which are child of that selected Tab, out of this scope, menu will disappear.

+Checkbox: “Hiden if Out of Scope”, if checked menu will display blank if current Tab is not in hierarchyof selectTab defined by Select root

That’s all for using as a module.

SKINOBJECT VALUES

/*************SKINOBJECT VALUES***************************/

<?xml version="1.0" encoding="utf-8" ?>

</Settings>

DisRegardHiddenFlag:True , menu will display hidden Tabs

Scope:

Scope value : "-1" ,default value, root menu is root portal, menu will show all menu items like you see menu structure of DNN menu.

Scope value : "-2" ,Active tab as root , assume user click on any tab, the menu will show only child items of the current tab,which user is on.

Scope value : "-3" ,Admin+Host item only , show only admin and host item, for some special usages if any.

Scope value : "124" ,124 is a TabId , the menu will active only at bellow this Tab and it’s childs. When you navigate to a Tab, notice the value …. tabid=124, or tabid/124… at address bar of browser. These value also appear next to Tabname in above picture.

Excludetabs: list the tab’s IDs that will be excluded from the menu, note that “;” should be wrap the values.

Replace Solpart, NAV Menu (Using as SkinObject mode)

Insert the menu into Your Skin file

Benefit of using as skinobject: this menu will appear on every pages of your portal without having to add again in newly created page and you able to access it in administrative pages.

Backup your skin file first. In case you do something wrong, just copy back your original skin and refresh browser.

.Locate you current skin

Let assume that you use "DNN-Blue\Horizontal Menu-Full width" skin which provide with DotNetNuke,

so the current skin can be found at <Your DotnetNuke install folder>\Portals\_default\Skins\DNN-Blue\Horizontal Menu - Full Width.ascx.

1.Make a backup of your skin file first.

2.Open your skin file using notepad.

3.Put the line bellow to top of your skin file.

<%@ Register TagPrefix="dnn" TagName="DNN360MENU" src="~/desktopmodules/CISS.SideMenu/SideMenu.ascx" %>

4.Put the following line at where you want the menu to appear

<dnn:DNN360MENU runat="server" id="dnnYourID" ConfigFile="default.xml"/>

Or (New in 1.4.2)

<dnn:DNN360MENU runat="server" id="dnnYourID" ConfigFileSkin="default.xml"/>

You need to unzip the install package, then continue to unzip the styles.zip to get many see style folders inside.

Copy the style folder and the xml file (here is ConfigFileSkin="default.xml") you want to use into the skin folder (after all you can package a long with your skin). If you have many skins , please name “default.xml” to different name like “defaultA.xml” …

Or (New in 1.4.3 , each sub portal can have each own menu style while using global skin)

<dnn:DNN360MENU runat="server" id="dnnYourID" ConfigFileSubPortal="default.xml"/>

You need to unzip the install package, then continue to unzip the styles.zip to get many see style folders inside.

Copy the style folder and the xml file (here is ConfigFileSubPortal="default.xml") you want to use into the each subportal folder (ex: Portals\0 , Portals\1 ….) . Note that each sub portal folder must have the specific style you choose and the default.xml file if you choose this method.

(dnnYourID can be any thing you like, just keep as it is. default.xml is one of several setting files that I make for each of my skin file. Each skin file will use one model)

This is done !!!

(in your <Your DotnetNuke install folder>/desktopmodules/CISS.SideMenu/) there is file

default.xml which contains setting for skinobject. Make change to the value only otherwise your menu might not work. These settings are the same as when you use as a module. When you are using this menu as skinobject, you have to modify its settings by modify this file.

<?xml version="1.0" encoding="utf-8" ?>

</Settings>

DisRegardHiddenFlag:True , menu will display hidden Tabs

Scope:

Scope value : "-1" ,default value, root menu is root portal

Scope value : "-2" ,Active tab as root

Depends on colors, structure in your skin file, you might need to edit further your skin to make the best fit.

USE WITH HTML SKIN

Many of people making skin using HTML skin technique, this menu works fine with this kind of skin.

After register menu token (described in guide file) , make change in your skin.xml, you use this token:
With Navigation Suite
<Object>
<Token>[DNN360MENU]</Token>
<Settings>
<Setting>
<Name>ConfigFile</Name>
<Value>default.xml</Value>
</Setting>
</Settings>
</Object>

Please note that DNN360MENU is case sensitive. If you have more than one menu skinobjects then please use number after a colon like in both skin.xml and skin html:

DNN360MENU:1

DNN360MENU:2

If you want to have different menu items for each menu, there are some settings (in xml file of each menu skinobject ) such as startlevel, Scope,excludetabs canbe used.

Making change in XML setting file doesn’t applied

Because the xml is cached for better perfomance, whenever you change in xml setting file, you need to restart DNN for clear cache:

Host-Host Application –Restart Application

Create new style ( when you decide to create your new style)

The easiest way to create a new style is to choose a style you want to modify and copy a whole folder and rename it. The following rules should be follow:

1.Rename your .css and .xsl exactly the same with the name of new folder.

If your new style is placed in folder MyStyle so the .css and .xsl should be name Mystyle.css and MyStyle.xsl respectively.

2.Rename your styles in your css file uniquely and remember to change their reference in .xsl file as well if you use this product as a module many time in one page. If you one style at one time, you can ignore step 2.

3. For every images that you use for your new style, make sure each of them has a unique name because when Dotnetnuke package module lack a ability to handle files with the same name eventhough they are in different folder. In folder styles, you can see every image has a unique name base on style folder it is in, for example H1selected…gif, and so on.

File structure.xml contains a sample of portal’s structure. It is quite easy to read with XMLSpy or other XML editor or notepad++. If you want to control xsl code, read this file first and this will help you to understand what going on in XSL styles. I like to use xmlspy because it do the validation check very well. If you modify xsl file, you should use a tool support validation check otherwise the menu will display blank!

Update new style:

This module has ability to detect new style provided style folder must be place inside styles foder.

New style folder should be copied into

<Your DNN install folder>\desktopmodules\CISS.SideMenu\styles\

In this folder, you also find all style, xsl and css files there.

How to remove JavaScript popup in Horizontal styles.

Please find a xsl file in HorizonTab4_b_nopopup as an example in which I have done the following:

Locate  tag in XSL file.

Remove all onMouseover and onMouseout eventsfromthis point onward. Don’t remove from LEVEL0 because you still need popup for admin and Host

How to change height HorizontalTab14 styles.

The menu height should depends on its background images. Therefore, in XSL file, which is on the same style folder with the style you are using, there are xsl code which define the height of table.
If you are using horizontal menu, there are 2 table (one for level 0, and the other for level 1).
In there you will see something like :

<table style=" background: transparent; " width="{$Width}" height="22" border= "0px" cellpadding= "0px" cellspacing= "0px" class="H11Style1"<tr style=" background: transparent; " height="22px" align="left">
<td class="H11Style4" width= "10% "<![CDATA[ ]]</td> 
......

<table width="100%" height="27px" cellpadding= "0px" cellspacing= "0px" style="border-bottom:thin #c6c6c5 solid;background-image: url('{$mediaPath}Level2BG11.gif');

For example, HorizontalTab14 , you can see a height of background image is 31, so what I did originally is adjust the height of table to 31 to match with this image.

If you has a different image, let say its height =25 px,

You can change in XSL file to:

table class="H12Header" width="{$Width}" height="25" border="0px" cellpadding="0px" cellspacing="0px" bgcolor="black"

tr style=" background: transparent;text-transform: capitalize ; " height="25">

Before

After: