Open topic with navigation

Creating menus for your website

Ektron lets you create and maintain a drop-down menu system for your website. The menu options can link to content, library files, external hyperlinks, and submenus. The following image shows an open Products menu on the Ektron Ontrek sample site.

You must be one of the following users to work with menus.

An Ektron developer can use the MenuView templated server control to place a menu on a Web form. See MenuView.

NOTE: If you choose to hide the border that surrounds content when you are logged in, the Add and Edit options are also hidden. This lets you view the page as it appears when not logged in. If the page is set to show borders and you still do not see Add and Edit, the feature may be turned off. Ask your administrator or website developer for more information.

Adding a menu

You can add a menu to a content folder, or to the root folder through Workarea > Content > Menus. When you add a menu to a content folder, the menu is associated with that folder. After creating the menu, you can assign items to it. See Adding a menu item .

Adding a menu to a content folder

  1. Go 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.

    • Title. The name of the new menu that appears on the Web page.
    • Image Link. You can have an image appear next to or instead of the menu title. The image must reside in the library. If it does not, add it before proceeding. For more information, see Adding a file to the library.

      To do this:

      1. Click the icon to the right of the ImageLink field (). The library window opens.
      2. Go to the folder that contains the image you want to use.
      3. Click Insert.
      4. You can replace menu text with an image so that only the image appears on the menu by checking 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 following image, 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. 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. 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.

      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.

    • Description. Add a more detailed description for the menu.
    • Folder Associations. When you click Change, the Select Folder screen appears.  See also: Assigning a folder or template to a menu

      • You can assign 1 or more folders to a menu by choosing a folder and clicking Add Selections. When you are done, click Save in the lower part of the screen (Reorder and Finalize Selections screen). You can click Cancel () to exit without saving your changes.
      • To reorder a folder on the Reorder and Finalize Selections screen, click on a folder (highlighting it) and use the up and down arrows.
      • To remove a folder from the list, check the box next to the folder on the Reorder and Finalize Selections screen, and click Delete ().
    • Template Associations. Enter the name of 1 or more templates in the Text field and click Add. The template name appears in the Template Associations box. You can also click Browse (...) to select a template from the CMS. when you have more than template associated, you can reorder them, remove them, or change the names (to another valid template name).  See also: Assigning a folder or template to a menu
  4. Click Save.

Adding a menu to the root folder through the Menus tab

  1. Choose Workarea > Content > Menus > Menus.
  2. The current language appears in the Language field. To create the menu in this language, proceed to the next step. To change the new menu's language, select one from the Language field drop-down.
  3. Click Add. The Add Menu screen appears.

    • Title. The name of the new menu that appears on the Web page.
    • Image Link. You can have an image appear next to or instead of the menu title. The image must reside in the library. If it does not, add it before proceeding. For more information, see Adding a file to the library.

      To do this:

      1. Click the icon to the right of the ImageLink field (). The library window opens.
      2. Go to the folder that contains the image you want to use.
      3. Click Insert.
      4. You can replace menu text with an image so that only the image appears on the menu by checking 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 following image, 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. 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. 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.

      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.

    • Description. Add a more detailed description for the menu.
    • Folder Associations. When you click Change, the Select Folder screen appears.  See also: Assigning a folder or template to a menu

      • You can assign 1 or more folders to a menu by choosing a folder and clicking Add Selections. When you are done, click Save in the lower part of the screen (Reorder and Finalize Selections screen). You can click Cancel () to exit without saving your changes.
      • To reorder a folder on the Reorder and Finalize Selections screen, click on a folder (highlighting it) and use the up and down arrows.
      • To remove a folder from the list, check the box next to the folder on the Reorder and Finalize Selections screen, and click Delete ().
    • Template Associations. Enter the name of 1 or more templates in the Text field and click Add. The template name appears in the Template Associations box. You can also click Browse (...) to select a template from the CMS. when you have more than template associated, you can reorder them, remove them, or change the names (to another valid template name). See also: Assigning a folder or template to a menu
  4. Click Save.

Assigning a folder or template to a menu

When you assign a folder or template to a menu, it exposes a menu whenever a content item that resides in a selected folder appears, or a content item that uses 1 or more of the selected templates appears. As a result, a user looking for a specific item sees similar items. For example, if your website sold books, your folders or templates may be organized by genre. One of your folders or templates is Teen Fiction. You create a submenu that contains the top 5 sellers in Teen Fiction. You then associate the Teen Fiction folder or template 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.

All of the following conditions must be true for the Flex Menu to automatically display selected items on an associated submenu.

  • You assign a folder or template to a menu.
  • A user goes to a content item that resides in the folder, or content that uses the template.

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

  • A Flex Menu whose EnableSmartOpen property is true appears on the screen.

Deleting a menu

  1. Open the View Menu screen.
  2. Click the menu you want to delete.
  3. Click Delete ().
  4. Click OK to delete the menu.

NOTE: Deleting a menu automatically deletes all menu items associated with it. Do not confuse the menu link with the item itself. For example, deleting a menu deletes its links to content but has no effect on the content.

NOTE: Only certain users are allowed to delete menus. See Auditing changes.

Adding a menu item

You can add menu items in the following ways:

You can add the following types of menu items.

Adding a menu item that opens a content item

  1. From the View Menus screen, choose Add Items.
  2. Click Content Item.
  3. Click Next... The Add New Item screen appears, listing all content folders.
  4. By default, All Types of content are available. You can narrow your selection (for example, HTML content), by choosing a filter from the drop-down.

  5. Open the folder you want in the folder tree.
  6. Check 1 or more folders to add each folder to the menu as separate menu items.

    IMPORTANT: If you check items then go to another screen before clicking Add, the items on the first screen are not added to the menu.

  7. Click Add.

    You can assign addition information to the menu item by editing the menu from the View Menu screen.

Tip—Alternate Method for Creating a Menu Item

You can use the following alternative method for creating a menu item.

  1. Go to a content folder.
  2. Click items to be assigned.
  3. Right click the mouse and select Copy.
  4. Locate the menu, right click the mouse, and select Paste Items to Menu.

    The View Menu screen reappears, showing the new content.

Adding a menu item that opens a library asset

  1. From the View Menus screen, choose Add Items.
  2. Click Library Asset.
  3. Click Next. The Add New Item screen appears.
  4. Enter a title for the library file that appears on the menu.
  5. Click Browse Library. The Library Folder screen appears.
  6. Select the type of file to insert (Files, Hyperlinks, Images).
  7. Go to a folder that contains assets.

    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.

  8. Select a library assetAn external file, such as a Microsoft Word document or image, stored in one of these Ektron siteroot folders: assets, privateassets, uploadedfiles and uploadedimages. An asset can be managed like native Ektron content. and click Insert. The Add New Item screen reappears with the asset displayed in the Title field.
  9. Click Save.

Adding a menu item that goes to a URL

  1. From the View Menus screen, choose Add Items.
  2. Click External Hyperlink.
  3. Click Next. The Add New Item screen appears.
  4. Enter the title of the new menu item.
  5. In the Link field, Enter the URLUniversal Resource Locator for the menu item.
    • https://world.episerver.com/ektron/ (external link)
    • /news/pr.aspx (root of the website)
    • pr.aspx (relative path)
  6. 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

  1. From the View Menus screen, choose Add Items.
  2. Click Sub Menu. The Add Menu screen appears.
  3. Click Next. The Add Menu screen appears.

    • Title. The name of the new menu that appears on the Web page.
    • Image Link. You can have an image appear next to or instead of the menu title. The image must reside in the library. If it does not, add it before proceeding. For more information, see Adding a file to the library.

      To do this:

      1. Click the icon to the right of the ImageLink field (). The library window opens.
      2. Go to the folder that contains the image you want to use.
      3. Click Insert.
      4. You can replace menu text with an image so that only the image appears on the menu by checking 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 following image, 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. 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. 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.

      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.

    • Description. Add a more detailed description for the menu.
    • Folder Associations. When you click Change, the Select Folder screen appears.  See also: Assigning a folder or template to a menu

      • You can assign 1 or more folders to a menu by choosing a folder and clicking Add Selections. When you are done, click Save in the lower part of the screen (Reorder and Finalize Selections screen). You can click Cancel () to exit without saving your changes.
      • To reorder a folder on the Reorder and Finalize Selections screen, click on a folder (highlighting it) and use the up and down arrows.
      • To remove a folder from the list, check the box next to the folder on the Reorder and Finalize Selections screen, and click Delete ().
    • Template Associations. Enter the name of 1 or more templates in the Text field and click Add. The template name appears in the Template Associations box. You can also click Browse (...) to select a template from the CMS. when you have more than template associated, you can reorder them, remove them, or change the names (to another valid template name). See also: Assigning a folder or template to a menu
  4. Click Save. The View Menu screen reappears. The Submenu items look like this: .

Editing a menu item

To edit a menu item, click on its name in the View Menu screen. The Edit Menu Item screen appears.

When you edit a menu item, you can make the following specifications:

Deleting a menu item

  1. Go to the View Menu screen for the menu that you want to delete.
  2. Click Remove Items ().
  3. Check the box next to items that you want to remove.
  4. Click Remove.

Reordering menu items

  1. Go to the View Menu screen for the menu that you want to rearrange.
  2. From the toolbar, click Reorder ().

    Alternatively, hover the cursor over the menu in the left panel, right click the mouse, and click Reorder Items.

    The Reorder Items screen appears.

  3. Click the item you want to move.
  4. Click the up arrow to move it up, or the down arrow to move it down.
  5. When finished, click Save.

Creating a menu in another language

NOTE: For information about supporting multiple languages on your website, see Working with multi-language content.

NOTE: To export menus to an XLIFF file for translation by an external agency, see Exporting content to XLIFF.

You can create an edition of any menu in every supported language. When a site visitor selects a language and clicks a menu link, Ektron displays the menu in that language if it is available. If it is not available, nothing appears.

Before creating or translating a menu, you should create or translate all content that will be on the menu. In this way, you can link this content to the new menu. However, after creating a menu, you can add new items to it.

To translate a menu into any supported language, you can go to the menu on your website or from go to it in the Workarea.

  1. Go to the menu on your website or from go to it in the Workarea.
    • On your website, lick the menu and the Edit Menu option.

    • In the Workarea, click the menu you want to translate.

    The View Menu screen appears for the selected menu.

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

    The Add Menu screen appears.

  3. Complete the screen for the menu in the selected language.
    • Title. The name of the new menu that appears on the Web page.
    • Image Link. You can have an image appear next to or instead of the menu title. The image must reside in the library. If it does not, add it before proceeding. For more information, see Adding a file to the library.

      To do this:

      1. Click the icon to the right of the ImageLink field (). The library window opens.
      2. Go to the folder that contains the image you want to use.
      3. Click Insert.
      4. You can replace menu text with an image so that only the image appears on the menu by checking 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 following image, 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. 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. 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.

      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.

    • Description. Add a more detailed description for the menu.
    • Folder Associations. When you click Change, the Select Folder screen appears.  See also: Assigning a folder or template to a menu

      • You can assign 1 or more folders to a menu by choosing a folder and clicking Add Selections. When you are done, click Save in the lower part of the screen (Reorder and Finalize Selections screen). You can click Cancel () to exit without saving your changes.
      • To reorder a folder on the Reorder and Finalize Selections screen, click on a folder (highlighting it) and use the up and down arrows.
      • To remove a folder from the list, check the box next to the folder on the Reorder and Finalize Selections screen, and click Delete ().
    • Template Associations. Enter the name of 1 or more templates in the Text field and click Add. The template name appears in the Template Associations box. You can also click Browse (...) to select a template from the CMS. when you have more than template associated, you can reorder them, remove them, or change the names (to another valid template name). See also: Assigning a folder or template to a menu
  4. Click Save. The View Menu screen reappears. The View drop-down displays the menu’s new language.

  5. To add items to the menu, see Adding a menu item . If you want to add a content menu item, you can insert an item in the selected language only.

Menu server controls

IMPORTANT: Starting from release 8.6, the Flex Menu and Menu server controls were replaced by the FrameworkUI: <ektron:MenuView> templated server control. If you are already using the Flex Menu and Menu server controls, you can continue to do so, but Ektron recommends using current versions of functionality.

Managing menus is a two-step process. The previous section describes the first step, which is how Ektron users create and update menus. The second step involves a developer placing a menu server control on a Web form. The server control manages the display of the menu on your website. This section introduces concepts that affect all of them, and explains the differences between them.

Ektron provides 2 menu server controlA server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified.s: Flex Menu and Menu.

Contrasting menu server controls

Appearance

Type Appearance

Flex

or

(Other styles are available)

Menu

Properties

Property

Flex Menu

Menu

508Section 508 Of The Rehabilitation Act - requiring electronic and information technology to be accessible to people with disabilities. compliant

 

Shutter menu

(When you click a menu, it opens directly below the menu title)

 

Secondary menu opens when cursor hovers over it

(alternative: secondary menu opens when clicked)

 

Starts out collapsed; expands as site visitor selects secondary menu

 

All menu levels open when page displays

(optional)

Can display secondary menu to the right of the root menu, instead of directly below it

(optional)

 

How appearance is modified

Server control properties and style sheet

Xslt and style sheet

How behavior is modified

Xslt

Xslt and style sheet

Option to launch menu links in a new window

 

 

Open topic with navigation