Menus

Learn how to create menus to go in any place on your ECEn XML web pages.

Menus are designed to help people looking at your website find the information they need quickly. Depending on your style of page and your content, you'll use different menus.

There are three types of menus we can create using the ECEn Web XML:

Main Menus
Main menus usually go on main pages, like the ECEn home page, and sit on the left side. Although you can put a menu on a secondary page, like this help page, it isn't recommended.

Left Menus
Left menus go on secondary pages and are designed to help users find their way through your local web pages under a certain topic. For an example, look to the Common Links Menu on this help page.

Right Menus
Right menus go on secondary pages and are designed to point users to other pages that might be helpful, but aren't necessarily a part of your main topic. They can be local pages or could be related pages all over the internet.

To create menus in the ECEn Web XML, we're going to use <menu> tags.

These instructions assume that you already have an ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belongs in the <content> portion of your page; check the instructions below to see if you need to make sure that you have a page with a <content> portion. If you need a quick tutorial or just a simple starter web page download, check out the 'Howdy, World' Tutorial where you can get a brief overview of what files you need to set up a basic ECEn XML web page.

All ECEn XML menus are pretty much the same, meaning that the procedure to make a left, right or main menu is the same. It is just a matter of how you style the menu.

If you need an example, have a look at the Menus Example page. You can view the XML source in your browser by clicking the 'this XML' link at the bottom of the page. Or, the XML source is located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Basic Menus

Here is some ECEn XML "code" designed to create a left menu:

<menu>

<style>left menu</style>

<name>Navigation Menu</name>

<item>

<name>Here</name>

<related-page>sample_menus.phtml</related-page>

</item>

<item>

<name>There</name>

<related-page>sample_menus.phtml</related-page>

</item>

<item>

<name>Anywhere</name>

<related-page>sample_menus.phtml</related-page>

</item>

</menu>

You can see that a menu is made up of a number of items, each of which has a name and a related page.

There is one major difference between menus and other content in that you do not place the menu code in the <content> block.

Here is a picture of what this menu would look like on a live ECEn XML web page:

[image]

To create a basic menu:

1	Create an opening and closing `<menu>` tag. Make sure your `<menu>` tag is within your `<page>` tags, but not within your `<content>` tags.

2	Place a `<style>` tag between the `<menu>` tags. Inside the `<style>` tags specify what kind of menu you'd like. Choose between 'left menu', 'right menu', or 'main menu'.

3	Place a `<name>` tag between the `<menu>` tags. Inside the `<name>` tags specify the name of your menu.

Place opening and closing <item> tags on the next line. Inside the <item> tags, create <name> and <related-page> tags.

4.1	Within the `<name>` tags, give the item a name.

4.2	Within the `<related-page>` tags, specify what page this menu item should point to, in other words, its related page.

5	Continue creating `<item>` tags until you have the items you want in your menu.

What about sub-menus?
Sub-menus are particularly useful for main style menus. Without sub-menus, main menus look like a list of links, which is alright, but it is easier to find your way around when related items are grouped together in some way.

To create sub-menus in the ECEn Web XML, we're going to use <sub-menu> tags.

For example, have a look at this code to create a main menu with a sub-menu:

<menu>

<style>main menu</style>

<name>Navigation Menu</name>

<sub-menu>

<name>Places</name>

<item>

<name>Here</name>

<related-page>sample_menus.phtml</related-page>

</item>

<item>

<name>There</name>

<related-page>sample_menus.phtml</related-page>

</item>

<item>

<name>Anywhere</name>

<related-page>sample_menus.phtml</related-page>

</item>

</sub-menu>

</menu>

This is what the menu would look like on an ECEn XML web page as you clicked on the menu to expand its contents:

[image]

To add sub-menus to a basic menu:

Group your items by topic and surround all of them in opening and closing <sub-menu> tag.

Right after the opening <sub-menu> tag, add a <name> tag. Within it, specify a name for your menu.

What if I still don't get it... Have look at the Menus Example and if you're still stuck, send an email to the ECEn Web Team and we'll be happy to help you.