ShowTable of Contents
A
menu is ultimately a search mechanism that groups together related documents based on specific criteria such as categories, keywords, authoring templates, site areas, and so forth.
In this section, we provide the steps to create the menu component for the River Bend site.
There are two methods of creating the menu component:
- Creating menu component using authoring template
- Creating menu component using authoring template and site area
Creating menu component using authoring template
For the River Bend website, we create a menu that uses the authoring template as search criteria. It allows users to find content throughout the website independently of a site area. The menu that you create in this section appears on the home page displaying the 4 main site areas using images from the site areas as links.
This content page displays content that has authoring template
General assigned, but may be linked to any site area.
To create the menu component, follow these steps:
- Click New > Component > Menu.
- In the Name field, enter Menu-HomePage.
- In the Menu Criteria section, under Select the criteria to use when searching for content: choose Authoring Templates.
- In the Authoring Template section, click on Add Authoring Templates and choose AT_General.
- Click OK.
- In the Menu design properties, leave the default options.
- In the Design for each menu search result add the following:
<a href="<Placeholder tag="href"/>">
<Element context="autoFill" type="content" key="Image"/></a>
Hints: This is referencing the component stored in the Image field of the content items.
To preview the menu, create the content first.
Creating menu component using authoring template and site area
In the following steps, we show you how to create a similar menu but selecting both the site area and the authoring template. We could implement it with the site area only, but since we have other content (ex. Default content) that we don't want to appear in the menu, we want to add the authoring template as a search parameter as well.
This menu will be displayed when clicking on the "Locations" from the tab “About us”. The page will first display the default content of the site area followed by the menu. Refer to below figure showing a part of the "locations" page.
To create a menu using authoring template and site area as search criteria, follow these steps:
- Click New and choose Component Menu. In the name field, enter Menu-Locations.
- In the Menu Element Query, choose Authoring Templates , and Site Areas.
- In the Authoring template section, Click on Add Authoring Template.
- Choose Locations and click OK.
- In the Site Areas section, click on Add Site Areas.
- Navigate to Locations by clicking on Home > About Us > Locations.
- Expand Further Options and select Current content.
- Add the following html to the header:
<table>
<tr><td> Store Locations: </td></tr>
- Add the following html to the Design for each menu search result:
1:
2: <tr><td>
3: <b>[Property context="autofill" type="content" field="title"] </b>
4: </td></tr>
5: <tr><td>
6: [Element context="autofill" type="content" key="txt_Summary"]
7: [Element context="autofill" type="content" key="rtf_Body"]
8: [Element context="autofill" type="content" key="img_Image"]
9: [Element context="autofill" type="content" key="shtxt_TheStoreTeam"]
10: [Element context="autofill" type="content" key="sel_Country"]
11: </td></tr>
- Close the table using the following html in the footer:
- In the Separator, you can either reference an image which represents a line to separate the result or add a dotted line which could be changed later.
To add an image not already created as an image component, do the following steps:
- In the separator section, click on Insert an Image.
- Click on Browse and navigate to the image seperator_490.gif.
- Select the option Add image to library and grant all users access and click OK.
- Click Save and Close.
To see the image that has been added to the library, click on
Component > Image. You will find a new image component added with the file name
seperator_490.gif.
Repeat steps 1 through 21 to create the following menu components:
Menu Name | (Menu Criteria)
Authoring Template | Site Area | Other options |
Menu - Current Area Items |
|
| Exclude current content from results
Location = Further Options > Current Content
Display Order = Decending
Results Primary Sort Key = Publish Date |
Menu - Featured Content |
| /Riverbend/Riverbend/Home/Our Community | Categories = /Riverbend/Riverbend/Featured (include descendants)
Display Order = Decending
Results Primary Sort Key = Publish Date |
Menu - Latest Events |
| /Riverbend/Riverbend/Home/Our Community/Events | Display Order = Decending
Results Primary Sort Key = Publish Date |
Menu - Recipes | Recipe |
| Exclude current content from results
Display Order = Ascending
Results Primary Sort Key = Publish Date |
Menu - Careers |
| Company/Careers with us |
|
Menu - Offers | News | News/Promotions |
|
Menu - Corporate Information | News | News/Corporate Information |
|
Menu - Offers
The Design for the menu would be as follows (no header or footer):
1:
2: <!-- Design Results -->
3: <tr> <td> <a href="<Placeholder tag="href"/>">
4: <Placeholder tag="name"/></a><br>
5: </td>
6: </tr>
Menu - Recipes
The Header, Design and Footer for the menu would be as follows:
1:
2: <!-- Header -->
3: <div class="contentIndex">
4: <div class="body">
5: <h1>Recipes</h1>
6: <ul class="list">
7:
8: <!-- Design Result -->
9: <li class="contentEditContainer item">
10: <div class="itemDetails">
11: <h3 class="itemTitle">
12: [Component name="riverbend/site images/downloadicon"] <a href="[Element context="autofill" type="content" key="Recipie"]">[Property context="autofill" type="content" field="title"]</a>
13: </h3>
14: <div class="itemSummary">
15: [Property context="autofill" type="content" field="description"]
16: </div>
17: </div>
18: <div class="contentClear"></div>
19: </li>
1:
2: <!-- Footer -->
3: </ul>
4: </div>
5: </div>
Menu - Latest events
The Header, Design and Footer for the menu would be as follows:
1:
2: <!-- Header -->
3: <div class="contentIndex">
4: <div class="body">
5: <ul class="list">
6: <li class="contentEditContainer item first"></li>
1:
2: <!-- Design Result -->
3: <li class="contentEditContainer item">
4: <div class="itemImage">
5: [Element context="autofill" type="content" key="ImageTn"]
6: </div>
7: <div class="itemDetails">
8: <h3 class="itemTitle">
9: <a href="[URLCmpnt context="autofill" type="content" mode="current"]">[Property context="autofill" type="content" field="title"]</a>
10: </h3>
11: <span class="itemSubTitle">
12: [Element context="autofill" type="content" key="Date 1" format="DATE_LONG"] - [Element context="autofill" type="content" key="Location"]
13: </span>
14: <div class="itemSummary">
15: [Property context="autofill" type="content" field="description"]
16: </div>
17: <div class="itemLink">
18: [Component name="riverbend/html - read more link"]
19: </div>
20: </div>
21: <div class="contentClear"></div>
22: </li>
1:
2: <!-- Footer -->
3: </ul>
4: </div>
5: </div>
Menu - Featured content
The Header, Design and Footer for the menu would be as follows:
1:
2: <!-- Header-->
3: <div class="contentIndex">
4: <div class="body">
5: <ul class="list">
6: <li class="contentEditContainer item first"></li>
1:
2: <!-- Design Results-->
3: <li class="contentEditContainer item">
4: <div class="itemImage">
5: [Element context="autofill" type="content" key="ImageTn"]
6: </div>
7: <div class="itemDetails">
8: <h3 class="itemTitle">
9: [Property context="autofill" type="content" field="title"]
10: </h3>
11: <div class="itemSummary">
12: [Property context="autofill" type="content" field="description"]
13: </div>
14: <div class="itemLink">
15: [Component name="riverbend/html - read more link"]
16: </div>
17: </div>
18: <div class="contentClear"></div>
19: </li>
1:
2: <!-- Footer-->
3: </ul>
4: </div>
5: </div>
Menu - Current area items
The Header, Design and Footer for the menu would be as follows:
1:
2: <!-- Header -->
3: <div class="contentIndex">
4: <div class="body">
5: <h1>Products</h1>
6: <ul class="list">
1:
2: <!-- Design Result -->
3: <li class="contentEditContainer item">
4: <div class="itemImage">
5: [Element context="autofill" type="content" key="ImageTn"]
6: </div>
7: <div class="itemDetails">
8: <h3 class="itemTitle">
9: <a href="[URLCmpnt context="autofill" type="content" mode="current"]">[Property context="autofill" type="content" field="title"]</a>
10: </h3>
11: <div class="itemSummary">
12: [Property context="autofill" type="content" field="description"]
13: </div>
14: <div class="itemLink">
15: [Component name="riverbend/html - read more link"]
16: [Component name="riverbend/auth-editcreatedeleteapprove" compute="always"]
17: </div>
18: </div>
19: <div class="contentClear"></div>
20: </li>
1:
2: <!-- Footer and Paging -->
3: <div class="foot">
4: <div class="pagingBar">
5: [Component name="riverbend/pn_pagenavigator"]
6: </div>
7: </div>
8: </ul>
9: </div>
10: </div>