Forums / Setup & design / Current dropdown menu (top menu) for ezflow?

Current dropdown menu (top menu) for ezflow?

Author Message

Marco Zinn

Wednesday 06 July 2011 11:14:01 am

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)

Marco
http://www.hyperroad-design.com

Sandra Parente

Thursday 07 July 2011 1: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}

Sandra Parente
www.netbliss.it

Sandra Parente

Thursday 07 July 2011 1:08:52 am

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

Sandra Parente
www.netbliss.it