|
Sunday 03 April 2005 11:13:33 am
Hi, We have implemented dinamic (get content on fly) popupmenus linked to ezp top and left menu respectively Basically, you need to override ezp standard popupmenu and call it from your ezp menu template (left or top) Follows portion of the ezp left menu template (3.4 version), see the include of the popup_menu at the bottom
<div id="leftmenu">
<div id="leftmenu-design">
...
{let docs=treemenu( $module_result.path,
$module_result.node_id,
array('folder','article'),
1,
2)
depth=6}
<ul>
{section var=menu loop=$:docs last-value}
...
<a id="childrenMenuAnchor{$menu.id}" class="{$menu.is_selected|choose( '', 'selected' )}" href={$menu.url_alias|ezurl}>{$menu.text}</a>
{set depth=$menu.level}
{/section}
</li>
...
</ul>
<b>{include uri='design:popupmenu/popup_menu.tpl' children=$:docs anchor='childrenMenuAnchor'}</b>
{/let}
...
</div>
Follows the code of the overrided popup_menu.tpl to be included above
This sample fecth the content of the menu items dinamically, but you can put the content of the menu items hardcoded to
<script language="JavaScript" src={"javascript/lib/ezjslibdomsupport.js"|ezdesign}></script>
<script language="JavaScript" src={"javascript/lib/ezjslibmousetracker.js"|ezdesign}></script>
<script language="JavaScript" src={"javascript/popupmenu/ezpopupmenu.js"|ezdesign}></script>
{section show=$children|gt(0)}
<script language="JavaScript1.2" type="text/javascript">
var menuArray = new Array();
</script>
{section var=cm show=$children|gt(0) loop=$children}
{let root_node=fetch( content, node, hash( node_id, $cm.id ) )
subdocs=fetch( 'content','list',hash('parent_node_id',$cm.id,
'sort_by', $root_node.sort_array,
'class_filter_type','include',
'class_filter_array',array( 'article', 'folder' )))}
{section show=$:subdocs|count()}
<script language="JavaScript1.2" type="text/javascript">
menuArray['ChildrenMenu{$cm.id}'] = new Array();
menuArray['ChildrenMenu{$cm.id}']['depth'] = 0;
menuArray['ChildrenMenu{$cm.id}']['headerID'] = 'menu-header';
menuArray['ChildrenMenu{$cm.id}']['elements'] = new Array();
{section var=cme show=$:subdocs|gt(0) loop=$:subdocs}
menuArray['ChildrenMenu{$cm.id}']['elements']['menu-{$cme.node_id}'] = new Array();
menuArray['ChildrenMenu{$cm.id}']['elements']['menu-{$cme.node_id}']['url'] = {$cme.url_alias|ezurl};
{/section}
aelement = document.getElementById( '{$anchor}{$cm.id}' );
aelement.onmouseover = function(e) {literal}{ezpopmenu_showTopLevel( e, 'ChildrenMenu{/literal}{$cm.id}{literal}'); return false;}{/literal};
</script>
<!-- Treemenu icon click popup menu -->
<div class="popupmenu" id="ChildrenMenu{$cm.id}">
{section var=cme show=$:subdocs|count() loop=$:subdocs}
<a id="menu-{$cme.node_id}" href="#" onmouseover="ezpopmenu_mouseOver( 'ChildrenMenu{$cm.id}' )">{$cme.name|shorten( 50 )}</a>
{/section}
</div>
{section-else}
<script language="JavaScript1.2" type="text/javascript">
aelement = document.getElementById( '{$anchor}{$cm.id}' );
aelement.onmouseover = function() {literal}{ezpopmenu_hideAll(); return false;}{/literal};
</script>
{/section}
{/let}
{/section}
<script language="JavaScript" src={"javascript/lib/ezjslibdomsupport.js"|ezdesign}></script>
<script language="JavaScript" src={"javascript/lib/ezjslibmousetracker.js"|ezdesign}></script>
<script language="JavaScript" src={"javascript/popupmenu/ezpopupmenu.js"|ezdesign}></script>
{/section}
Above you can see js code nested with ezp template code in specific way,
you can change this to swit your needs, but the important thing is that your code needs the js libs in order to work
Lazaro
http://www.mzbusiness.com
|