Adding a Menu via Content Folder

1. Navigate to a content folder.
2. The current language appears as a flag next to the screen title. To create the menu in this language, proceed to the next step. To change the new menu's language, click View > Language and select the new language.
3. Click New > Menu. The Add Menu screen appears.
   

   

4. Use the following information to complete the screen.
   —Fields—

   Fields on the Add/Edit Menu Screen

   Field	Description
   Title	The name given to the menu by its creator. It appears on the Web page to indicate the kind of information on the menu.
   Image Link	You can have an image appear next to or instead of the menu title. For example: To do this: Prerequisite:  The image must reside in the library. If it does not, add it before proceeding. For more information, see Copying a File to the Library. Click the icon to the right of the ImageLink field (). The library window opens. Navigate to the folder that contains the image you want to use. Click Insert. Using Image to Replace Title Text Alternatively, you can replace menu text with an image, so that only the image appears on the menu. To do this, check the Use image instead of a title box.
   URL Link	After you create a menu, your developer links it to text or an image on a Web page by modifying a page template. When a site visitor moves the cursor over the text or image, the menu appears. In the example below, the menu appears when the site visitor moves the cursor over Products. You can also assign a URL link to a menu using this field. If you do, and the user clicks the link text or image, he jumps to the specified page. For example, in this field, you assign the product landing page, siteroot/products.aspx. In the illustration above, if the user moves the cursor over Products, the assigned menu appears. However, if the user clicksProducts , he jumps to siteroot/products.aspx. Entering the Path to the Landing Page The path may be relative to site root, such as siteroot/jobs.aspx a static template path or a dynamic path, such as wellness.aspx?id=40&wellness=Hemophilia an external hyperlink, such as http://www.example.com.
   Template Link	NOTE: This field applies to content only. It has no effect on other types of menu items (such as images). Also, this field only affects content that dynamically references a content block, such as /CMS400Min/therapies.aspx?id=84. If the menu option is a template that includes content (for example, /CMS400Min/news.aspx), the template identified here is ignored. If you want to apply a template to this menu, enter it here. If you do, content on this menu uses this template when selected from the menu. If you do not, this menu's content uses the template specified in its Quicklink.
   Description	Add a more detailed description for the menu.
   Folder Associations	See Effect of Assigning a Folder to a Menu.
   Template Associations	See Effect of Assigning a Template to a Menu.

5. Click Save.

After creating the menu, you may assign items to it. See Adding a Menu Item.

Adding a Menu via the Menus Tab

If you choose a content folder then create a menu, it is assigned to that folder.

1. From the Workarea, click Content > Menus > Menus.
2. The current language appears in the View field. To create the menu in this language, proceed to the next step. To change the new menu's language, select one from the View field drop-down.
3. Click Add. The Add Menu screen appears.
4. To complete the fields on the Add Menu screen, see Working with Menus.

After creating the menu, you may assign items to it. See Adding a Menu Item.

Adding a Menu Item via Content Folder

To add a menu item via a content folder:

1. Navigate to the content folder that contains the menu to which you want to add items.
2. Click View > Menu.
3. In the View Language drop-down, select the menu's language.
4. Click the menu. The View Menu screen opens, displaying the menu's items. Submenus look like this: .
5. To add a new item to the menu, click Add Items.

   The Add New Item screen displays a list of items you can add to the menu. Use to the table below to select a type of menu item, and follow the steps to add it.

   

   Menu item type	For more information, see
   Content	Adding Content as a Menu Item
   Any library asset: image, file, Quicklink, hyperlink to the menu	Adding a Library Asset as a Menu Item
   External hyperlink	Adding an External Hyperlink as a Menu Item
   Submenu	Adding a Submenu as a Menu Item

• After you insert menu items, you can view and modify information about them. To do that, click the item's title. Use the following information to complete the fields on the Edit Menu Item screen.
  —Fields—

  Fields on the Add/Edit Menu Item Screen

  Title—The name of the menu item. It appears on the Web page to indicate the item.

  Image Link—You can have an image appear next to or instead of the menu title. For example:

  

  To do this:

  NOTE: Before beginning these steps, the image must reside in the library. If it does not, add it before proceeding. For more information, see Copying a File to the Library.

  1. Click image ().
  2. The library window opens.
  3. Navigate to the folder that contains the image you want to use.
  4. Click Insert () to insert it.

  Replacing Title Text with Image

  Alternatively, you can have the image replace the menu text, so that only the image appears on the menu. To do this, check the Use image instead of a title checkbox.

  

  URL Link—After you create a menu, your developer links it to text or an image on a Web page by modifying a page template. When a site visitor moves the cursor over the text or image, the menu appears. In the example below, the menu appears when the site visitor moves the cursor over Products.

  

  

  You can also assign a URL link to a menu using this field. If you do, and the user clicks the link text or image, he jumps to the specified page.

  For example, in this field, you assign the product landing page, siteroot/products.aspx. In the illustration above, if the user moves the cursor over Products, the assigned menu appears. However, if the user clicks Products , he jumps to siteroot/products.aspx.

  Entering the Path to the Landing Page

  The path may be

  • relative to site root, such as siteroot/jobs.aspx
  • a static template path or a dynamic path, such as wellness.aspx?id=40&wellness=Hemophilia
  • an external hyperlink, such as http://www.example.com.

  Description—Add a more detailed description for the menu.

  Target—

  Determines the type of window that appears when you click a link in the server control.

  • _Self (default)—opens in same window.
  • _Top—opens in parent window.
  • _Blank—opens in new window.
  • _Parent—opens in the parent frame.

  Link—Use this field if you want to override this content's menu template by using the template specified in its Quicklink.

Adding a Menu Item via Menus Tab

1. From the Workarea, click Content > Menus.
2. Click the menu to which want to add a menu item.
3. In the View Language drop-down list, select the menu's language.
4. Click AddItems. The Add New Item screen displays a list of items you can add to the menu. Select a type of menu item, and follow the steps to add it.
   • Content—Adding Content as a Menu Item
   • Any library asset: image, file, Quicklink, hyperlink to the menu—Adding a Library Asset as a Menu Item
   • External hyperlink—Adding an External Hyperlink as a Menu Item
   • Submenu—Adding a Submenu as a Menu Item
5. After you insert menu items, you can view and modify information about them. To do that, click the item's title. See Also: Working with Menus

Adding a Menu Item via Navigation Link on a Web Page

1. Log in.
2. Access the Web page that contains the link to display the menu.
3. Place the cursor on the hyperlink that causes the menu to appear. The menu appears.
   

   

4. Click Add. The Add Menu screen displays a list of items you can add to the menu.
5. Select the type of menu item and follow the steps to add it.
   • Content—Adding Content as a Menu Item
   • Any library asset: image, file, Quicklink, hyperlink to the menu—Adding a Library Asset as a Menu Item
   • External hyperlink—Adding an External Hyperlink as a Menu Item
   • Submenu—Adding a Submenu as a Menu Item
6. After you insert menu items, you can view and modify information about them. To do that, click the item's title. See Also: Working with Menus

Adding Content as a Menu Item

1. Follow the directions in Adding a Menu Item via Content Folder, Adding a Menu Item via Menus Tab, or Adding a Menu Item via Navigation Link on a Web Page.
2. Click the radio button next to Content Item.
3. Click Next... The Add New Item screen appears, listing all content folders.
4. By default, all content types are available. To limit your selection (for example, Word documents), click the content types drop-down and select a type.
   

   

5. Content items in a folder appears below any subfolders. Click any subfolder to display its content.
6. Check all content you want to add from any single screen to the menu.

   WARNING! If you check items then proceed to another screen before clicking Add, the items on the first screen are not added to the menu.

7. Click Add.

   As an alternative, navigate to a content folder, click items to be assigned, right click the mouse and select Copy. Then, locate the menu, right click the mouse, and select Paste Items to Menu.

   

   

   The View Menu screen reappears, showing the new content.

8. To access the Edit Menu Item screen for the new content, hover the cursor over the title, then click. The Edit Menu Item screen lets you assign additional information to the menu item, such as the target window. See Working with Menus.
9. Continue to add menu items as needed.

Adding a Library Asset as a Menu Item

To add a library asset as a menu item via a content folder or menus tab:

1. Follow the directions in Adding a Menu Item via Content Folder, Adding a Menu Item via Menus Tab, or Adding a Menu Item via Navigation Link on a Web Page.
2. Click the radio button next to Library Asset.
3. Click Next. The Add New Item screen appears. Enter a title for the library asset that will appear on the menu.
4. Click Browse Library. The library screen opens.
5. In the right frame, select the type of asset to insert (image, hyperlink, and so on).

   NOTE: To insert assets, the menu’s folder must contain library assets. However, you can insert library assets from other folders for which you have permission.

6. Select a library asset and click Insert. The Add New Item screen reappears.
7. Click Save.

Adding an External Hyperlink as a Menu Item

To add an external hyperlink as a menu item via a content folder or the Menus tab:

1. Follow the directions in Adding a Menu Item via Content Folder, Adding a Menu Item via Menus Tab, or Adding a Menu Item via Navigation Link on a Web Page.
2. Click External Hyperlink.
3. Click Next. The Add New Item screen appears.
4. Complete the fields as needed.
   • Title—Title of the new menu item.
   • URL Link—The external hyperlink's URL. For example, www.example.com.
5. Click Save.

   NOTE: When you add an external hyperlink menu item, the URL does not get added to the library nor is an ID assigned to it. So, when you save the menu item, it is not added to the Ektron database nor can it be retrieved for future use.

Adding a Submenu as a Menu Item

1. Follow the directions in Adding a Menu Item via Content Folder, Adding a Menu Item via Menus Tab, or Adding a Menu Item via Navigation Link on a Web Page.
2. Click Sub menu. The Add Menu screen appears.
3. Complete the fields using Working with Menus as a reference.
4. Click Save.

Adding New Content to a Menu via Navigation Link on a Web Page

NOTE: You can only use this feature after your Web developer has modified a page template to display the menu. For more information, see Introduction to Menu Server Controls.

1. Access the Web page that contains the link to display the menu.
2. Place the mouse on the hyperlink that causes the menu to appear. A menu appears.
   

   

3. Click Add. The Add Menu screen opens, displaying items you can add.
4. Refer to the table below for selecting a menu item and follow the steps to add it.
   • Content—Adding Content as a Menu Item
   • Any library asset: image, file, Quicklink, hyperlink to the menu—Adding a Library Asset as a Menu Item
   • External hyperlink—Adding an External Hyperlink as a Menu Item
   • Submenu—Adding a Submenu as a Menu Item

Editing a Menu's Properties via its Content Folder

1. From the Workarea, navigate to the content folder that contains the menu.
2. Click View > Menu.
3. Click the menu you want to edit.
4. If appropriate, click the submenu that you want to edit.
5. Click Properties (). The View Menu screen appears.
6. Click Edit Menu.
7. Update the fields on the screen by referencing Working with Menus.
8. Click Save.

Editing a Menu's Properties via Menus Tab

1. From the Workarea, click Content > Menus.
2. Click the menu you want to edit.
3. Click Properties (). The View Menu screen appears.

   Alternatively, hover the cursor over the menu in the left panel, right click the mouse, and click View Properties.

   

   

4. Click EditMenu.
5. Update the fields on the screen by referencing Working with Menus.
6. Click Save.

Editing a Menu's Properties via Navigation Link on a Web Page

1. Navigate to the Web page that contains the menu link.
2. Click the link. The menu appears.
   

   

3. Click Edit Menu. The menu's View Menu screen appears.
4. Click Properties ().
5. Click Edit Menu.
6. Update the fields by referencing Working with Menus.
7. Click Save.

Viewing a Menu via its Content Folder

1. From the Workarea, navigate to the content folder that contains the menu.
2. Click View > Menu. The View All Menus screen displays all menus in the folder.
3. Click the menu you want to view. The menu’s options appear.
   

   

Viewing a Menu via the Menus Tab

1. From the Workarea, click Content > Menus. The View All Menus screen appears.
2. Click the menu you want to view. The menu’s options appear.
   

   

   NOTE: If your Workarea language is set to all languages, you cannot view child menus—only parent menus. To view a child menu, select its parent menu's language, using the View > Language menu option.

   

   

Viewing Menus via Navigation Link on a Web Page

1. Access the Web page on which your Web developer inserted the link to display the menu.
2. Click the link that launches the menu on the Web page. A menu appears.
   

   

Translating a Menu

To translate a menu into any supported language: You can navigate to the menu via the Web site or from the Workarea. Each procedure is described below.

By navigating the site

By Navigating the Site

1. Sign on to an Ektron Web site.
2. Select the menu’s current language.
3. Navigate to the page that has the menu you want to translate.
4. Click the menu and the Edit Menu option.
   

   

   The View Menu screen appears for the selected menu.

5. From the Add drop-down list, select the language into which you want to translate the menu.
   

   

   The Add Menu screen appears.

6. Complete the screen for the menu in the selected language. See Working with Menus.
7. Click Save. The View Menu screen reappears. Now, the View drop-down displays the menu’s new language.
   

   

8. Add items to the menu. See Adding a Menu Item. If adding content, you can only insert an item in the selected language. Later, you can add more menu items, edit them, delete them, view them, and so on.

By accessing the menus report screen

By Accessing the Menus Report Screen

1. From the Workarea screen, click Content > Menus.
2. Click the menu you want to translate. The View Menu screen appears for the selected menu.
3. From the Add drop-down list, select the language into which you want to translate the menu.
   

   

   The Add Menu screen appears.

4. Complete the screen for the menu in the selected language. See Working with Menus.
5. Click Save. The View Menu screen reappears. Now, the View drop-down displays the menu’s new language.
   

   

6. Add items to the menu. See Adding a Menu Item. If adding content, you can only insert an item in the selected language. Later, you can add more menu items, edit them, delete them, view them, and so on.

Creating a Menu in Any Language

1. From the Workarea screen, click Content > Menus > Menus.
2. From the language drop-down list, select the new menu’s language.
   

   

3. Create the menu. See Adding a Menu via the Menus Tab.

Effect of Assigning a Folder to a Menu

If all of the following conditions apply...

• you assign a folder to a menu
• a user navigates to any content item that resides in the folder
• a Flex Menu whose EnableSmartOpen property is true appears on the screen

...the Flex Menu automatically displays the items on the associated submenu.

NOTE: Navigation to the content can consist of clicking a quicklink, a menu option, a list summary item, the result of a search, and so on.

In effect, you are instructing Ektron to expose a menu whenever a content item that resides in a selected folder appears. As a result, a user looking for a specific item sees similar items.

As an example, assume your Web site sells books, and folders are organized by genre. One of your folders is “Teen Fiction.” You create a submenu that contains the top 5 sellers in “Teen Fiction.” You then associate the Teen Fiction folder with that submenu. When a site visitor finds views a book in that category, a Flex Menu in the page’s left column displays the top 5 Teen Fiction titles.

Using the Select Folder Screen

Using the Select Folder Screen

The Select Folder screen lets you assign new folders to a menu, reorder folders, and delete folders from the menu association. These tasks are described below.

When you click Change below Folder Associations on the Edit menu screen, the Select Folder screen appears.

The following table describes tasks you can perform on these screens.

Task	Instructions
Add folder to list	In the top of the screen, navigate to the folder you want to add. Click AddSelections.
Remove folder from list	In the lower section of the screen, click the box to the left of the folder. Click Delete ().
Remove all folders from list	Click check box to the left of Folder. Click Delete ().
Move a folder up or down on the list NOTE: The folders' sequence has no impact on how they are used. It only affects the appearance of the Select Folders screen.	Click check box to the left of the folder. Click the up or down arrow buttons.
Save changes and return to Edit Menu screen	Click Save.
Exit screen; do not save changes	Click Exit ().

Effect of Assigning a Template to a Menu

If all of the following conditions apply....

• you assign a template to a menu
• a user navigates to any content item that uses the template
• a Flex Menu whose EnableSmartOpen property is true appears on the screen

...the Flex Menu automatically displays the items on the associated submenu.

NOTE: Navigation to the content item can consist of clicking a quicklink, a menu option, a list summary item, the result of a search, and so on.

In effect, you are instructing Ektron to expose a menu whenever a content item that uses one or more selected templates appears on the screen. As a result, a user who begins looking for a specific content item sees similar items.

As an example, assume your Web site sells books, and your templates are organized by genre. One of your templates is “Teen Fiction.” You create a submenu that contains the top 5 sellers in “Teen Fiction.” You then associate the Teen Fiction template with that submenu. If a site visitor visit a page describing the book, the Flex Menu in the page’s left column displays the 5 top Teen Fiction titles.

Assigning a template to a menu

Assigning a Template to a Menu

1. Move to the Template Associations area of the Edit menu screen.
2. In the box on the right, enter the template that you are assigning to this menu. It can be an Ektron template, or any file that you wish.
3. Click Add.

To later change or remove the template, select it then click Change or Remove.

Contrasting Menu Server Controls

Flexible Menu Server Control

The Flex Menu server control displays a menu on a Web form. A Flex Menu creates XML, so you can modify its behavior using an XSLT file, and change its appearance using a cascading style sheet (.css) file.

NOTE: Before you can use this server control, you must create one or more menus in the Ektron Workarea. See Also: Working with Menus.

See Also: Contrasting Menu Server Controls

Sample menus

Sample Menus

To facilitate the deployment of Flex menus, Ektron provides several sample menus that show their capabilities. You can use whichever sample meets your needs, then modify it for your site.

The sample menus can be viewed from the Developer Sample Page (siteroot/Developer/default.aspx) > Menu—Flex.

Description of sample menus

Description of the Sample Menus

NOTE: The Flex Menu server control generates the same XML for all samples, and identical copies of the Demo.xsl create identical markup for all samples. The different manifestations in the samples are due to the CSS styling rules in the related files.

Sample Menu	Description	Location on Server
AjaxDemo	The only sample menu for which Ajax is enabled by default. Ajax provides a quicker response time because the client loads menu levels on an “as needed” basis. This feature eliminates the need to do a page refresh to get new content. You may not notice the speed on small menus, but with large menus, the speed improvement is significant. NOTE: The first time an Ajax-enabled menu is invoked, it is slow because the server is building it. After that, its response time should be quicker than non-Ajax menus. How the Menu Works When you first click a menu, all text links are black. When you click it a second time, they are grayed out. Secondary menus do not change. There’s no way to close a menu after it opens. WARNING! This sample is meant to visually display a menu being populated via an Ajax call, as a user drills into it. This demo is not meant to be part of a public site. Rather, it demonstrates how a Flex Menu with Ajax improves performance. WARNING! When using Ajax with the Flex Menu (by setting EnableAjax=”True”), it is important to set the MenuDepth property to one (MenuDepth="1"). Otherwise, the Flex Menu obtains the entire menu tree. Setting the depth to one forces the menu to populate only the first level, and causes the menu to drill only one level deep with each click of a submenu node. It is set to this properly in the Ajax demo.	siteroot/Developer/ Menu /FlexMenu/AjaxDemo /FMAjaxDemo.aspx
Expanding	Menu has gradient background, which changes when you hover over it. Menu options that display content have a plain background. Submenus look like main menus but are indented. When you first click a menu, it expands vertically. When you click it a second time, it closes, so it looks like it did when you first viewed it.	siteroot/Developer /Menu /FlexMenu/Expanding /FMExpandDemo.aspx
Fly-Out	Menus have gradient background. The color changes when you hover over it. Menu options that display content have a plain background. Their color changes when you hover over it. Submenus look like main menus but are offset to the right. (See illustration below.) When you first click a menu, it expands horizontally to the right. When you click it a second time, it closes, so it appears as it did when you first viewed it.	siteroot/Developer/Menu/ FlexMenu/FlyOut/ FMFlyOutDemo.aspx
Horizontal	Site navigation often requires the placement of a horizontal menu in the upper part of the page. The Horizontal Flex Menu sample is a working menu with XSLT and CSS (as well as Flex Menu configuration settings) that provides a basis for this design. The sample's CSS file dramatically alters the appearance and behavior of this Flex Menu. You will typically edit that file to accommodate your site's design (colors, background images, and so on).	siteroot/Developer/Menu/ FlexMenu/horizontal/ FMHorizDemo.aspx
Lightweight	This menu generates much simpler markup (consisting of <UL> and <LI> elements) and uses a few lines of jQuery for control, instead of the normal, large JavaScript file ek_flexmenu.js. The jQuery code is located on the sample page: LightweightDemo.aspx. See this file also for an example of disabling the automatic inclusion of the menu's JavaScript file by setting the property IncludeJS="false".	siteroot/Developer/Menu/ FlexMenu/Lightweight/ LightweightDemo.aspx
List	This menu’s appearance is similar to the AjaxDemo but it doesn’t use Ajax. The menu is an unordered list. When you first click a menu, all text links are black. When you click it a second time, it closes, so it appears as it did when you first viewed it.	siteroot/Developer/Menu /FlexMenu /List/FMListDemo.aspx
XML Modify	This menu demonstrates how to significantly modify a menu's behavior by adding custom code in the code-behind file. In particular, it demonstrates use of the control's PreProcessXml event to modify the XML before the XSLT is run PostProcessXml event to modify the markup after the XSLT is run	siteroot/Developer/Menu /FlexMenu /XMLModify/FMXMLModDemo.aspx
508 compliance	This sample demonstrates a Section 508 compliant menu. The markup provides site navigation clues to web-page readers, including Braille-readers and text-to-speech. NOTE:  To truly be 508-compliant, you must also implement a color scheme that provides the intended information to blind or visually-impaired users. Because color selection is determined by the site design, this task is left to the site designer.	siteroot/Developer/Menu /FlexMenu /508Demo/FM508Demo.aspx
Master Page	See ASP.NET Master-Pages Flex Menu

ASP.NET Master-Pages Flex Menu

ASP.NET Master-Pages Flex Menu

The Ektron Master Page sample leverages the ASP.NET master page concept with Ektron folder-templates to simplify the design and maintenance of site pages with multiple menus. The top menu is contained by the master page, while each side menu is contained in a corresponding child-content template page.

Note that all menus use the same root menu, in this example DefaultMenuID="89". Each side menu also has a particular starting child-node: StartMenuId="90" (or 91, 92).

The master page menu

The First (Child Content) Template Menu

The First (Child Content) Template Menu

To ensure that the proper (child-content) template page is loaded, each folder specifies the corresponding target ASPX page as its default template, and the content's quicklink specifies the template URL. Therefore, whenever a particular content item is shown, the referenced template is loaded, and the proper side menu appears.

Folder templates

Files included with the master page sample

Files Included with the Master Page Sample

The sample's files include the following:

• Demo.xsl—this single XSLT generates markup for all menus (top and side). If desired, you may specify different XSLTs.
• JPGs—background image files.
• side_expand.css—contains the style rules applied to the side menus.
• Template1.aspx—the first child-content template; contains a side menu that starts at submenu ID 90. The corresponding code-behind CS file is basically empty.
• Template2.aspx—the second child-content template; contains a side menu that starts at submenu ID 91.
• Template3.aspx—the third child-content template; contains a side menu that starts at submenu ID 92.
• top_horizontal.css—contains the style rules for the top menu.
• TopMenuMasterPage.master—holds the top menu and is a container for the previously mentioned templates.

Because side menus are contained in template pages, which are specified in the content's quicklink, all menu display actions are automatic. While customization options are available, these can quickly complicate matters, making maintenance more difficult and possibly resulting in unintended consequences. For example, a desired action is overridden by a customization added for another purpose.

Customization options include:

• The use of folder associations (set in the workarea, submenu properties).
• The use of template associations (workarea, submenu properties).
• In code-behind, possibly using the API as well as the Flex Menus’ PreProcessXml event (which fires after the XML has been loaded into the control's XmlDoc—just before the XSLT is run. This allows inspection and/or modification of the XML before it generates the menus' markup).

Copying and editing sample menus

Copying and Editing Sample Menus

To create a menu based on a sample:

1. Examine the sample menus and decide which one best meets your needs for a particular page. See Description of the Sample Menus.
2. If you want to create a new template (.aspx page) for the menu, place the new template in a new folder. Then, copy all files in the sample menu folder to the new folder and rename each file. For example, change Ajaxdemo.aspx to myflexmenu.aspx, AjaxDemo.css to myflexmenu.css, and demo.xsl to myflexmenu.xsl.
3. To insert a Flex Menu server control onto an existing template, copy the .css and .xsl file into the folder that contains the template.

   WARNING! If you specify an external file, do not store it in your site's Workarea folder to prevent it from being overwritten when you upgrade.

   IMPORTANT: The renamed .css file name must be all lowercase.

4. Open the .aspx page. Update the stylesheet and DisplayXslt properties to refer to the new .css and .xsl files.

   If the files do not reside in the template’s folder, indicate their relative path using the syntax where slash (/) indicates the site root.

5. Open the .css file. Update the parent class name to match the new file name. For example, if you copied the AjaxDemo.css file, the top of it looks like this.

   .ajaxdemo .ekflexmenu
           {
           /* DIV; wraps the entire menu */
           /* (the outer-most non-user container element) */
           color: rgb(0, 0, 255);
           /*width: 148px;*/
           font-size: 12px;
           font-family: Sans-Serif;
           }
           .ajaxdemo .ekflexmenu_submenu,
           .ajaxdemo .ekflexmenu_submenu_hover,
           .ajaxdemo .ekflexmenu_submenu_parent,
           .ajaxdemo .ekflexmenu_submenu_parent_hover
           {
           /* DIV; holds submenu items, such as a submenu title and links. */
           top: 0px;
           left: 0px;
           }
           .ajaxdemo UL
           {
           /* UL; a container for menu list items (useful for non-graphical browsers). */
           /*list-style: none;
           /*margin: 0px;
           padding: 0px;*/
           }

   Notice that every class begins with the file name, .AjaxDemo. Replace all occurrences of this with the new file name. To continue the above example, begin all classes with .myflexmenu.

Working with the Flex Menu Xslt file

Working with the Flex Menu Xslt File

This section explains some non-intuitive elements of the *.xslt file.

Element	Context	Description
MenuFragment	<xsl:when test="/MenuDataResult /Info/ menuFragment='false'">	A flag that indicates the XML data is not complete. Instead, it’s a fragment that begins deeper than the top level (for example, a submenu fragment). Because the data is incomplete, the XSLT processes the fragment differently. For example, don’t generate JavaScript startup code.
menuConst	<xsl:attribute name="id"><xsl:value-of select="$menuConst"/>0_ ekflexmenu</xsl:attribute>	Each menu generates several elements, which the client code (JavaScript) accesses via a unique ID. For example, JavaScript needs to identify the selected submenu or item when a user clicks on an element. menuConst is only used is when creating elements without a corresponding XML block, such as when creating a structure to hold the menu.
#NoScroll	<xsl:attribute name="href"># NoScroll </xsl:attribute>	NoScroll is sent to the href portion of a link when there is nothing to put there (for example, when the link is supposed to run JavaScript). NoScroll prevents the page from refreshing, going to another page, or scrolling when it should not.
event	<xsl:attribute name="onkeydown">returnekFlexMenu.menuBtnKeyHdlr (event);</xsl:attribute>	To make the xslt cross-browser compatible, it must support different methods of obtaining/passing the event object. In this example, the global event object is passed to the handling function. NOTE: event corresponds to window.event. window. is implied.

How the Flex Menu Server Control Determines Which Item is Selected

How the Flex Menu Server Control Determines Which Item is Selected

The Flex Menu server control has the ability to select (highlight) options in a Flex menu as site visitors navigate around the Web site. For example, a site visitor arrives at a Web page through a link in an email. If the QueryString matches the an item in a Flex menu, the item is shown as selected.

Below is the logic the Flex menu uses to decide when a menu item should show as selected. The list is presented in the order in which the code checks to see if an item should be highlighted.

If any menu item is selected, its parent menu is marked selected. If any menu is selected, all ancestor menus are selected. When all tests have been performed and no matches are found, the Flex menu is rendered with no items selected.

WARNING! As soon as one condition is satisfied, the item is shown as selected and the testing stops.

NOTE: Steps 2 through 8 are each repeated recursively throughout the menu data hierarchy until either a match is found or the end is reached. If there are no matches for a test, the control continues with the next one.

1. Inspects the QueryString to see if the ekxmensel parameter is present with a matching menu node ID. This parameter is used to specify the exact node a user clicked. The node, its parent, and ancestor menus are all marked as selected.
2. Inspects the QueryString to see if a Content ID parameter value matches a menu item. If the Content ID in the QueryString matches a menu item, it is highlighted. For example, the QueryString includes ExamplePage.aspx?id=123, and a menu item links to Content ID 123.
3. Inspects the QueryString to see if a Form ID parameter value matches a menu item. If the Form ID passed in the QueryString matches a Flex menu item, it is highlighted. For example, the QueryString includes ExamplePage.aspx?ekfrm=456, and a menu item links to Form ID of 456.
4. Inspects the QueryString for a direct match with a menu item link. If there is a match, the menu item is selected. For example, if the QueryString has ExamplePage.aspx and there is an item on the menu that matches, the menu item is shown as selected.
5. Inspects the QueryString for a id, ekfrm or pageid parameter. If one is found, the control looks for a folder association between submenus and the folder that contains the object with the given ID. If the association exists, the menu item is shown as selected.
6. Inspects the QueryString to see if there is a direct match with a menu button link. If there is a match, the menu button is selected. For example, the QueryString has ExamplePage.aspx and there is a button on the menu that matches.
7. Inspects the QueryString to see if there’s a template association with the filename. If there’s a match, the menu item is shown as selected.
8. Inspects the QueryString for the id or ekfrm parameter and whether a value greater than zero is associated with it. If so, the control checks menu buttons for use of LinkIt.aspx. If a button is using LinkIt.aspx and either id or ekfrm parameter matches, the menu button is selected.

Analyzing the Flex Menu's selection of menu items

Analyzing the Flex Menu's Selection of Menu Items

As you can see, the Flex Menu server control performs a complex sequence of tasks to determine which menu option to select. If you are unsure of a Flex Menu's behavior, you can view a log that lists the reasons for a menu selection. Use the log to troubleshoot issues with a Flex Menu.

Setting up a log of Flex Menu information

Setting Up Log of Flex Menu Information

Follow these steps to set up the ability to view a log of Flex Menu display information.

1. Open your site root/web.config file.
2. Under system.diagnostics, set LogLevel to 4. Save and close web.config.
   

   

3. Edit the .aspx or .ascx page that hosts the Flex Menu control.
4. Set the control's LogInfo property to true and save the page.

   <CMS:FlexMenu ID="FlexMenu1" LogInfo="True" runat="server" /> 

   NOTE: It may be helpful to temporarily disable the menu's cache by setting CacheInterval="0".

5. Refresh the browser that contains the Flex Menu you edited in the Step 4.
   

   

6. Using the Windows Event Viewer, look for the newest information-level event that contains Message: Flex Menu (under the timestamp line).
   

   

The event message identifies the reason the menu node was selected. Or, if no matches were found, the message indicates that nothing is selected.

Menu Server Control

The Menu server control calls a menu to be displayed on a page. Using the Menu server control, you can manipulate a menu by using the DisplayXslt property. Below is a menu display with the SampleMenu XSLT.

Before you can use the Menu server control, you must create a menu in the Ektron Workarea. To learn about creating menus, Working with Menus.

See Also: Contrasting Menu Server Controls

Menu server control properties

Menu Server Control Properties

The following are Ektron-specific server control properties. You can find information about native .NET properties such as font, height, width and border style in Visual Studio^® help.

• Authenticated (String)

  Indicates if you are logged into the CMS Explorer and can use it to browse to content, collections, and so on. See Also: Browsing Your Ektron Site Using CMS Explorer.

• CacheInterval (Double)

  The number of seconds that the server control’s data is cached. The default is 0 (zero). For example, if you want to cache the data for 5 minutes, set to 300. See Also: Caching with Server Controls.

• DefaultMenuID (Long)

  The ID of a menu that appears where you insert this server control if no other menu is identified or available. If you don’t know the ID number of the menu, use the CMS Explorer to browse to it. See Also: Browsing Your Ektron Site Using CMS Explorer

• DisplayXslt (String)

  The XSLT to use to render the menu.

  • None—databind only
  • SampleMenu—A sample display, formatted as a bulleted menu list
  • TreeMenu—A sample display, formatted as a folder tree. You can expand the tree by clicking on the folder icon.
  • Path to Custom Xslt—If desired, enter a relative or absolute path to an Xslt that determines the display of the page.

  For more information on using the SampleMenu and TreeMenu DisplayXslt, see Using DisplayXslt Samples.

  WARNING! If you specify an external file, do not store this file in the Workarea folder. If you store this file in the Workarea folder, the file will be lost when you upgrade.

• DoInitFill (Boolean)

  By default, Fill occurs during the Page_Init event. Set to false if you want to postpone the fill-action until later. In this case, Fill is automatically called during the Page Render event. You might do this if you need to set or change a property on the control in code-behind and have it render with your changes shown.

• DynamicParameter (String)

  Select menu_id. When you do, this server control uses the menu passed as a URL parameter.

• Hide (Boolean)

  Hides or displays the output of the control in design time and run time.

  • True—Hide the control output.
  • False—Display the control output.
• Language (Integer)

  Set a language for viewing content; shows results in design-time (in Visual Studio) and at run-time (in a browser).

  For more information, see Working with Menus in a Multi-Language System.

• Stylesheet (String)

  Specify the location and style sheet for the menu. For example: \Workarea\csslib\mytest.css. Leave blank to use the default. global.css is the default style sheet. It is located in \webroot\siteroot\Workarea\csslib.

• SuppressAddEdit (Boolean)

  When set to True, suppress the Add and Edit buttons on the menu when a user is logged in to Ektron. The default is False.

  • True—suppress the Add and Edit button when a user is logged in to Ektron.
  • False—show the Add and Edit buttons when a user is logged in to Ektron.
• SuppressWrapperTags (Boolean)

  Suppresses the output of the span/div tags around the control.

  • True—Suppress wrap tags.
  • False (default)—Allow wrap tags.
• WrapTag (String)

  Lets a developer specify a server control’s tag.

  • Span (default)—designate an inline portion of an HTML document as a span element.
  • Div—apply attributes to a block of code.
  • Custom—Lets you use a custom tag.

Using DisplayXslt samples

Using DisplayXslt Samples

Two DisplayXslt samples are provided with the Menu server control, SampleMenu and TreeMenu. This section explains how to use them.

WARNING! If you specify an external file, do not store this file in the Workarea folder. If you store this file in the Workarea folder, the file will be lost when you upgrade.

SampleMenu

SampleMenu

The SampleMenu DisplayXslt lets you display an Ektron menu as a bulleted item list. See below for an example.

When you are logged in to your Ektron site, 2 menu items are added to each section of the menu: Add and Edit Menu. The user can use these to add a new menu item or edit an existing one. See example below.

For information on a adding a menu item, see Adding New Content to a Menu via Navigation Link on a Web Page.

For information on a editing a menu, see Editing a Menu's Properties via Navigation Link on a Web Page.

SampleMenu XSL code

For an example of the XSL code used in the SampleMenu, click the following link and choose the appropriate version.

http://dev.ektron.com/kb_article.aspx?id=2114

TreeMenu

TreeMenu

The TreeMenu DisplayXslt lets you display an Ektron menu as a clickable folder list. You can expand and collapse the menu by clicking on the folder icons.

When you are logged in to your Ektron site, 2 menu items are added to each section of the menu: Add and Edit Menu. The user can use these to add a new menu item, or edit an existing menu item. See example below.

For information on a adding a menu item, see Adding New Content to a Menu via Navigation Link on a Web Page.

For information on a editing a menu, see Editing a Menu's Properties via Navigation Link on a Web Page.

NOTE: When using the TreeMenu server control with Visual Studio and Windows 2003, the folder images do not display during design-time. They do, however, display correctly during run-time.

TreeMenu XSL Code

For an example of the XSL code used in the MenuTree, click the following link and choose the appropriate version.

http://dev.ektron.com/kb_article.aspx?id=2114

Retrieving the XML structure of a menu

Retrieving the XML Structure of a Menu

Retrieving a menu's XML structure provides greater control over developing XSLs. The following is an example of how to retrieve the XML structure:

1. Open a new Web form.
2. Drag and drop a Menu server control onto it.
3. Set the DefaultMenuID properties.
4. Drag and drop a textbox on the Web form.
5. Set the TextMode property to MultiLine.
6. Set the width of the text box to at least 400px.
7. On the code-behind page, add the following line.

   Textbox1.Text = Menu1.XmlDoc.InnerXml

8. Build the project.
9. View the Web form in a browser.
10. The XML structure of the menu appears in the textbox.

For an additional example, see the Menu XML page on the CMS400Developer samples page. It is located at:

In a browser:

http://siteroot/CMS400Developer/Developer/Menu/MenuAsXML.aspx

In the source code:

siteroot/CMS400Developer/Developer/Menu/MenuAsXML.aspx and MenuAsXML.aspx.vb