Home : Digital Asset Management : OE Toolbar : Editing the Layout : Links And Menus
Links And Menus
Many sites have a few dozen links that need to be displayed in an HTML menu system. Often these menu's require roll overs or selection indicators. The menus also require an ability to display hierarchies of links.
 |
 Edit Links and Menus - create, edit, or delete menu items. |
Storing And Editing Links
The file called /links.xml contains an xml structure of your links and navigation.
The links.xml file looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<linktree textpostfix="">
<a href="/index.html" id="index" text="Welcome">
<a href="/editing.html" id="editor" text="Editor Features"/>
<a href="/advanced.html" id="advanced" text="Admin Features">
<a href="/programming.html" id="programming" text="Programming"/>
</a>
<a href="/cart.html" id="cart" text="Magasin en ligne"/>
<a href="/blog.html" id="blog" text="Blog"/>
<a href="/intranet.html" id="intranet" text="Intranet"/>
</a>
</linktree>
To edit this page you can use the Links And Menus editor located on the OE Admin Toolbar. Be sure not to assign two links a duplicate ID.
The 
Edit Links and Menus tool is used to manage the menu for your OpenEdit Website.
The menu for your site is controlled using an XML file. This simple yet powerful concept allows you to manage your site map using a visual xml editing tool called the 'Edit Links and Menus' tool.
Edit Menu Display
To increase the flexibility of OpenEdit, menu structure and menu display are kept separate.
Menu Structure - The
Edit Links and Menus tool
allows the site owner to edit their links.xml file. Links.xml contains the menu tree and link
information that controls the navigation through your web site.
Menu Display - Controlled separately within the layout, your OpenEdit menu works together with your site's CSS file to properly display your site's menu items. The link between your layout and your menu (links.xml) is done using velocity.
Displaying Links
Most sites use a file called /menu.html to format and display the /links.xml content.
Here is an example:
<table>
\#foreach ( $link in $linktree.getLinkChildren("index") )
<tr>
<td>
<a href="$home$link.url" \#if ( $link.isChildSelected() )class=smenu \#else class=menu \#end >$link.text</a><br>
\#if( $link.isChildSelected() )
#foreach( $child in $link.children )
> <a href="$home$child.url" #if ( $child.isChildSelected() )class=smenu #else class=menu #end >$child.text</a> <br>
#end
\#end
</td>
</tr>
\#end
</table>
- $linktree.getLinkChildren("index") This has read in the links.xml file and finds the element with an id of "index". It then returns all the children in the same order as they appear in the file.
- #if ( $child.isChildSelected() ) This if an conditional check to see if the visitors web browser has selected this element or has selected one of the children of this element. This is used to control the CSS class declaration or can be used to expand the tree one level deeper.
- $link.url This is the href that is specified in the links.xml file
- $link.text this is the text from links.xml file.
Display All Links
To render a list of all links you can use this API:
\#foreach ( $link in $linktree.getLink("index").list() )
#if( $link.depth == 0 )
##skip root level link
#elseif( $link.isChildSelected() )
<div style="padding-left: ${link.depth}0px;"><a class="smenu" href="$link.url">$link.text</a></div>
#else
<div style="padding-left: ${link.depth}0px;"><a class="menu" href="$link.url">$link.text</a></div>
#end
#end
Loading Custom links.xml Files
To read in a custom links.xml from a sub directory:
/subdirectory/_site.xconf
<page>
<path-action name="LinkTree.loadLinks">
<linkpath>/subdirectory/links.xml</linkpath>
</path-action>
<path-action name="LinkTree.setSelectedLinkByUrl">
<linkpath>/subdirectory/links.xml</linkpath>
</path-action>
</page>
LinkTree.loadLinks - This creates a variable named $linktree
LinkTree.setSelectedLinkByUrl - Tries to set $linktree.selectedLink to the link that the browser is at