... Elxis version 2009.2 codename Electra is out, download it from Elxis Download Center (EDC) ...

From Elxis Official Documentation

For linking through pages in Elxis CMS we use Menu items. Menu items are nothing else than simple links. A Menu is a group of such links (menu items) that are being displayed together, as a group. So, a menu is consisted by menu items. Elxis has a number of different types of extensions to provide special functionality, modules, components, bots, templates, etc. A menu is a module. So, the generation of a menu is controlled by a module. The most common module for a menu generation is the module mainmenu. Various instances of this module can generate different menus each one having it's own settings and layout. On the default Elxis installation there are some pre-made mainmenu instances, main menu, top menu, other menu, user menu. You can create more if your like or edit existing ones.

Why menus are important?

Except from the obvious answer, that menus provide navigation and internal, or even external, linking there is an other reason on why the menus are so important. The pages appearance is controlled via the menu items parameters. So, the style and the layout of a page is controlled by the menu item that links to it! Via menu item's parameters you can set a number of options such as if you wish the PDF generation icon to be displayed, if you wish the article's creation date to be displayed, etc. You can also assign modules to menu items. This way you can set specific modules to be displayed when a specific menu item is clicked. For instance you can assign the third party Weather module to be displayed only on the "links" page. In that case when someone clicks the "links" menu item of top menu, then on the "links page" he will also see the weather module and to no other page. You can assign the same module to more than one menu item if you wish.

Menus and menu items are important because:

• They provide navigation
• They control the site appearance and layout
• You can assign modules on them

Menu item identity

Each menu item is unique even if we have more than one linking to the same page. Menu item's identity is a PHP variable named Itemid. When a menu item is clicked the Itemid "travels" though the URL to the linking page and says to Elxis which was the menu item that was clicked by the visitor. In the destination page Elxis gets the Itemid and loads the parameters for that menu item. This way we can set the proper page layout, load the proper modules, etc, as you have set them in the menu item's edit page in Elxis administration. If a proper Itemid is not set then Elxis will load on the linked page the parameters of the menu item that represents Elxis front-page. This is why it is important to set up your menu items properly.

How do I create a new Menu?

First of all make sure you need a new menu. For most web sites existing menus are fine and you just have to edit them. To create a new menu navigate to Menu -> Menus Manager (Menu manager). Click the New icon button in Elxis toolbar. Enter a Menu Name (no spaces, no special symbols, must be unique) and a Module Title. Click Save. You menu is ready. To edit the parameters of your new menu navigate to Elxis modules (don't forget that a menu is an instance of the mainmenu module) and edit the module with the title you have just entered.

What is the System Menu?

The System Menu is a special menu that contain system links. These links are menu items to Elxis pages with internal functionality such as users registration page, members list page, etc, and should always be published. Normally you will never see the system menu or the system links because by default it is displayed in the hidden module position. So why we need the system links if we never see them, you may ask. Well, we don't need the links themselves, we need the functionality they provide. As a page layout and display is controlled by a menu item Elxis internal pages without a menu item linking to them they would be like a mess. Front-page's modules would be assigned to that pages, navigation would notify you that you are on the front-page and you would n't be able to set styling parameters to that pages. System links is a solution to this problem. The trick is that a menu item does n't have to be visible to set parameters for it! If you deeply understand this point you can do many tricks with Elxis menus.

System links are entered automatically during Elxis installation, they are all multi-lingual and normally you never have to edit them. You can create more system links to the system menu or to any other menu if you like.

How do I create a new Menu Item?

To create a new Menu Item (a link to a page) first navigate to the menu you wish to add your new menu item. If this is the Main menu, then navigate to Menu -> mainmenu. Click New to create a new menu item. Select your desired menu item type (i.e. "Component" if you wish to create a link to a component) and click Next. Write a title for your new menu item. This will be the link's text that will be displayed to your site visitors. Menu items have a number of parameters, some of them are common to all menu items and some others are menu item type specific. Let's examine some of the commons parameters.

• Parent item If you wish your menu item to be displayed as a sub-menu of an other menu item then select the parent menu item.
• Ordering The order this menu item will be displayed in relation to the other menu items on the same menu.
• Language The languages this menu item is available for. Note that you can select multiple languages (use control+click) or all languages. The language selection drop down list shows only the site's published languages.
• Access Level The minimum access a user should have to see this menu item. By default this is Public Frontend (everyone).
• Published Whether the menu item is published or not. Only published menu items are shown/used by Elxis.

Set properly the other parameters may displayed according to the selected menu item type.
Click Save when finish.

• More detailed documentation on creating menu-items(links) you can find at menu links page.

Why there are too many menu item types?

A menu item as it is being displayed in your site HTML source code is nothing else than a simple link to a page. Based on this fact it is weird to know that there are many menu item types. Why? What's the difference? Well the difference is not on the link they generate, we could simple create a text box that you would write any link you wish in that case. The difference is that each of these types have different parameters. And why they have different parameters? Because they link to pages with special functionality.

Previously on the same article we said that the page's layout and style is controlled by the menu item parameters. Pages with different functionality need different parameters. That's why we have different menu item types. For instance for a menu item that links to a content item page we have parameters that control the PDF, RTF, E-mail and Print icons display. These icons are not needed for a menu item that links to a site's contact form for example.

How to decide which is the proper menu item type?

This depends on what page you want to create a link to and, in some cases, how you wish the linked page to be displayed.

Menu item types for content

For content there are several options and 2 different layout styles. Table and Blog. With Table we mean that the items of the linked page will be displayed as a list of links one bellow the other. With Blog we mean that the items of the linked page will be displayed in a blog style. Visitors will be able to read the article's introduction text directly from that page. If we want to link to a category we must select one of the Content Category menu item types and if we want to link to a section we must select one of the Content Section menu item types.

Table - Content Category sample page on elxis.org

Blog - Content Section sample page on elxis.org

There are also menu item types for linking directly to an article, to an autonomous page (an article that does not belong to any category and section) and to archived content.

Here is a list for the menu item types for content:

• Blog - Content Category
• Blog - Content Category Archive
• Blog - Content Section
• Blog - Content Section Archive
• Link - Autonomous Page
• Link - Content Item
• Table - Content Category
• Table - Content Section

Other menu item types

Some build-in component have special menu item types for some of their pages. For instance if you want to create a link to a component's Weblinks category you must select the Table - Weblink Category type. The same applies for components Newsfeeds and Contact. To create a link to an other component, a third party component for instance, then the proper type is Component.

Finally they are some special menu item types such as the Bridge that creates a link to an Elxis Bridge (almost deprecated), the Seperator that enters some empty space or a separator inside our menu items, the Wrapper that links to a page displayed inside an i-frame and the eBlog Item that links to a component's eBlog blog.

Multilingual menus

Everything in Elxis is multi-lingual. Menus and menu items are not an exception. You can set a menu item to be displayed only for specific languages, the whole menu (the mainmenu module instance) to be displayed only for specific languages and any other language combination. Elxis is very flexible in this area but you have to be careful.

Adding wrong language filters on your menus can lead to page not found issues or to logical errors such as creating a menu item only displayed for English language that links to a category available only for Greek language. Before you start creating menu items and writing articles we advice you to create a multi-lingual structure of your site content split into sections and categories. Afterwards create the needed menu items for these areas. By making language combinations you can limit down the number of the required menu items.

You can select multiple languages by pressing the control button in your keyboard (ctrl) and after click on the languages.

User access and menus

You can filter menu items based on the users access group. If you wish to create a menu item visible to anyone just set access to Public Frontend. This means that this item will be visible to guests and off course to any logged in user. If you wish to create a menu item visible only to logged in users then set it's access to Registered. Registered users and users with access level more than Registered (Author, Publisher, Manager, Administrator, etc) will be able to see this item. Guests won't see this menu item.

In Elxis administration items available to anyone are colored green. Items available to front-end user groups (Author, Publisher, Manager) are colored in orange. Items available only to users with back-end access are colored in red. In a list of items (i.e. a list of menu items), you can switch an item's access level without editing it. To do so just click the current access level and a small window will appear with the available access levels. Select your desired one and click Save.

Styling a menu

Elxis CMS uses cascading style sheets (CSS files) to style HTML elements. To change the style of a menu you have to edit your template's CSS files. Remember that a menu is a module. If you wish to have individual menus/modules style you have to set a CSS suffix or a menu class suffix for your modules.

What is a module CSS class suffix

A module CSS class suffix is just a word, any word, that is being added to the end of the module's CSS class. This way the module's CSS class becomes moduletable-your_suffix-here instead of just moduletable. Now you can set different style for your module.

Example 1.
A module with style -2 (surrounding by a DIV element) and with no CSS suffix. We will use the default CSS class moduletable to make module's title green (all modules with no suffix will have the same appearance).

<style type="text/css">
   div.moduletable { margin: 10px 0; color: #000; }
   div.moduletable h3 { color: green; }
</style>
 
<div class="moduletable">
   <h3>Module title in green</h3>
   <!-- module contents here -->
</div>

Example 2.
A module with style -2 (surrounding by a DIV element) and with CSS suffix. We will use the css suffix -redtitle to create a module that will have it's title in red colour. Everything else will have the same appearance as the rest modules on the site.

<style type="text/css">
   div.moduletable-redtitle { margin: 10px 0; color: #000; }
   div.moduletable-redtitle h3 { color: #FF0000; }
</style>
 
<div class="moduletable-redtitle">
   <h3>Module title in red</h3>
   <!-- module contents here -->
</div>

What is a menu CSS suffix

Especially menus support a secondary suffix that you may use. This is the menu css suffix that is being added to the UL and LI elements of a menu. A menu is consisted by links that appear in an unordered list. These list has by default CSS class mainlevel. You can add a menu css suffix to this css class to achieve individual menu styling.

Example 1.
A menu that shows links one bellow the other (vertically). No menu css suffix used.

<style type="text/css">
   div.moduletable { margin: 10px 0; border: 1px solid #ff9900; }
   ul.mainlevel li { list-style-type: none; padding: 0; margin: 0 0 0 10px; }
</style>
<div class="moduletable">
    <ul id="mainlevel634" class="mainlevel">
        <li><a href="#" class="mainlevel">link a</a></li>
        <li><a href="#" class="mainlevel">link b</a></li>
        <li><a href="#" class="mainlevel">link c</a></li>
    </ul>
</div>

Example 2.
A menu that shows links side-by-side (horizontally). Menu css suffix -hor is used.

<style type="text/css">
   div.moduletable { margin: 10px 0; border: 1px solid #ff9900; }
   ul.mainlevel-hor li { list-style-type: none; padding: 0; margin: 0 10px 0 0; display: inline; }
</style>
 
<div class="moduletable">
    <ul id="mainlevel-hor634" class="mainlevel-hor">
        <li><a href="#" class="mainlevel-hor">link a</a></li>
        <li><a href="#" class="mainlevel-hor">link b</a></li>
        <li><a href="#" class="mainlevel-hor">link c</a></li>
    </ul>
</div>

Read Also

Menu_Manager
Creating_menu_links