eZ Community » Forums » Setup & design » Current dropdown menu (top menu) for...
expandshrink

Current dropdown menu (top menu) for ezflow?

Current dropdown menu (top menu) for ezflow?

Wednesday 06 July 2011 8:14:01 pm - 2 replies

Hi there,

i wonder, if there is any current project, that provides a current dropdown menu, which includes with the current ezflow or ezwebin template set.

I mean: CSS menu, none or very little JS, supporting all current major browsers (incl. our friend IE).

It's quite a shame, that the current templates shipped with ez do not provide a dropdown menu... but I also cannot see or find a current project/extension about this..

The only thing, that i know of, if the 2009 "topdrop" project: http://projects.ez.no/css_dropdown_top_menu . But that fails in IE9 (at least)

Modified on Wednesday 06 July 2011 8:14:33 pm by Marco Zinn

Thursday 07 July 2011 10:02:24 am

Hi Marco,

I took the tpl and css of the dropdownmenu extension and put it directly in ezwebin to make it work with ezflow. After some testing I succeded to make it work on IE8 (not yet tested on IE9, still underco):

 <!--double_top.tpl--> 
{*
Here we are going to generate some code with ul/li hierarchy A stylesheet called dropdown.css is also necessary to create the 
menu. Of course, it can be modified Only Folder are shown in the menu. This can be changed by adding the id of the class which you want to put into 
it. For example, replace array(1) by array(1,2) for each fetch functions if you want to show folders and Articles in each levels.
*}
{def $goleft=ezini( 'TopDrop', 'goleft', 'design.ini')} 
{let top_cat=2 used_node=false()}
{set used_node=2}
    
<center>
<div class="menu"><ul> {def $base=fetch( 'content', 'node', hash( 'node_id', 2 ) )} 
 
{* FIRST LEVEL *}
 
{def $i=0}
 
{section loop=fetch(content,list,hash(parent_node_id,$top_cat, class_filter_type, "include", class_filter_array, array(1, 16, 17, 19, 20, 23, 38, 39),sort_by,$base.sort_array))}
    {let child_check=fetch(content,list,hash(parent_node_id,$:item.node_id, class_filter_type, "include", class_filter_array, array(1, 16, 17, 19, 20, 23, 38, 39),sort_by,$base.sort_array))}
    {set $i=inc( $i )}
    <li><a class="{concat('menu_',$i)}" href={$:item.url_alias|ezurl}>{$:item.name}
 
{section show=$child_check|count|gt(0)}
 
    {* SECOND LEVEL *}
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if IE 8]><!--></a><!--<![endif]-->
    <table><tbody><tr><td>
    {if $i|gt( $goleft )}
        <ul class="endstop">
    {else}
        <ul>
    {/if}
        {section loop=fetch(content,list,hash(parent_node_id,$:item.node_id, class_filter_type, "include", class_filter_array, array(1, 16, 17, 19, 20, 23, 39),sort_by,$:item.sort_array))}
        {let child_check1=fetch(content,list,hash(parent_node_id,$:item.node_id, class_filter_type, "include", class_filter_array, array(1, 16, 17, 19, 20, 23, 39),sort_by,$:item.sort_array))}
              <li><a {section show=$child_check1|count|gt(0)}class="drop"{/section} href={$:item.url_alias|ezurl}>{$:item.name}
          
{section show=$child_check1|count|gt(0)}
                
        {* THIRD LEVEL *}
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if IE 8]><!--></a><!--<![endif]-->
        <table><tbody><tr><td>
        {if $i|gt( $goleft )}
            <ul class="left">
        {else}
            <ul>
        {/if}
            {section loop=fetch(content,list,hash(parent_node_id,$:item.node_id, class_filter_type, "include", class_filter_array, array(1, 16, 17, 19, 20, 23, 38, 39),sort_by,$:item.sort_array))}
            {let child_check2=fetch(content,list,hash(parent_node_id,$:item.node_id, class_filter_type, "include", class_filter_array, array(1, 16, 17, 19, 20, 23, 38, 39),sort_by,$:item.sort_array))}
            <li><a {section show=$child_check2|count|gt(0)}class="drop"{/section} href={$:item.url_alias|ezurl}>{$:item.name}
 
{section show=$child_check2|count|gt(0)}
 
            {* FOURTH LEVEL *}
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if IE 8]><!--></a><!--<![endif]-->
            <table><tbody><tr><td>
            {if $i|gt( $goleft )}
                <ul class="left">
            {else}
                <ul>
            {/if}
                {section loop=fetch(content,list,hash(parent_node_id,$:item.node_id, class_filter_type, "include", class_filter_array, array(1, 16, 17, 20, 23, 39),sort_by,$:item.sort_array))}
                <li><a href={$:item.url_alias|ezurl}>{$:item.name}</a></li>
                {/section}
            </ul>
            </td></tr></tbody></table>
            <!--[if lte IE 6]></a><![endif]-->
            {section-else}
            </a>
            {/section}
            </li>
            {/let}    
            {/section}
        </ul>
        </td></tr></tbody></table>
        <!--[if lte IE 6]></a><![endif]-->
        {section-else}
        </a>
        {/section}  
        </li>
        {/let}    
        {/section}
    </ul>
    </td></tr></tbody></table>
    <!--[if lte IE 6]></a><![endif]-->
    <!--[if !IE]> --><!-- <![endif]-->
{section-else}
     </a>
{/section}
    
    </li>
    {/let}
    {/section}
 
{undef $i}
{undef $goleft}
{undef $base}
 </ul></div>
 
{/let}

Thursday 07 July 2011 10:08:52 am

We have also commented all the TOPMENU divs in ezflow/stylesheets/pagelayout.css to show correctly the dropdown.css divs.

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from