Page 1 of 1
Responsive menu problem
Posted: Fri May 03, 2013 4:17 am
by midway31
On this page I am trying to edit the menu template to show an arrow for a menu parent (
Media Center) the same as on the section header(
Fighting for what Wannon needs) but cannot work out what to do to add it to the menu template. I need to add this to the template somewhere:
<span class="arrow"></span>
Here is the template:
Code: Select all
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul class="menu full-width blue">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="active menuparent"><a class="active menuparent"
{elseif $node->current == true}
<li class="active"><a class="active"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}<span class="arrow"></span></a>
{/if}
{/foreach}
The url is
http://www.dantehan.com.au/new2/index.php and if you resize the browser you will see what and why I need it for the responsive menu.
Re: Responsive menu problem
Posted: Fri May 03, 2013 9:36 am
by oliverseddon
Not tested but give this a go:
Code: Select all
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul class="menu full-width blue">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="active menuparent"><a class="active menuparent"
{elseif $node->current == true}
<li class="active"><a class="active"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span>{if $node->parent == true or ($node->current == true and $node->haschildren == true)}<span class="arrow"></span>{/if}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}<span class="arrow"></span></a>
{/if}
{/foreach}
Re: Responsive menu problem
Posted: Fri May 03, 2013 3:37 pm
by elkman
Viewing your site it appears the above menu solution worked. Did it?
Elkman
Re: Responsive menu problem
Posted: Fri May 03, 2013 9:48 pm
by midway31
Thanks but that gives error:
Code: Select all
Syntax Error in template "module_db_tpl:MenuManager;zz" on line 38 "{/foreach}" unclosed {if} tag
I have not fixed it yet the media menu button still has no arrow to show drop down.
Re: Responsive menu problem
Posted: Fri May 03, 2013 9:56 pm
by oliverseddon
Didn't help that you hadn't added the whole template in your original post. Try this:
Code: Select all
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul class="menu full-width blue">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="active menuparent"><a class="active menuparent"
{elseif $node->current == true}
<li class="active"><a class="active"
{elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span>{if $node->parent == true or ($node->current == true and $node->haschildren == true)}<span class="arrow"></span>{/if}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}<span class="arrow"></span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Re: Responsive menu problem
Posted: Sat May 04, 2013 6:01 am
by midway31
Thanks for that but have since found that menu does not work in ipad and I phone so am now using a differrent menu css etc.
This is the menu template:
Code: Select all
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul id="pcss3mm" class="pcss3mm pcss3mm-collapsable"><!-- opener (requiered) -->
<li class="opener">
<a href=""><i class="icon-reorder"></i>Menu</a>
</li>
<!--/ opener -->
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
<div class="grid-container3"> {repeat string='<ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li><li class="dropdown" style="list-style-type: none;"> </li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
{assign var='classes' value='active'}
{if $node->parent == true}
{assign var='classes' value='active dropdown'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' active dropdown'}
{/if}
{if $node->type == 'sectionheader'}
<li class="dropdown"><a class="{$classes}"><span class="sectionheader">{$node->menutext}</span></a>
{else}
<li><a class="{$classes}"
{/if}
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="dropdown"><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li class="dropdown"><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="dropdown"><a class="dropdown"
{else}
<li>
<a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li><li class="dropdown" style="list-style-type: none;"> </li></ul>' times=$node->depth-1}
</li>
</ul>
{/if}
All is fine but on mouseover the dropdowns disappear. Not sure where to put the closing </div> tag.
This is the example I am adapting:
Code: Select all
<!-- collapsable mega menu -->
<ul id="pcss3mm" class="pcss3mm pcss3mm-collapsable">
<!-- home -->
<li>
<a href="#"><i class="icon-home"></i>Home</a>
</li>
<!--/ home -->
<!-- opener (requiered) -->
<li class="opener">
<a href=""><i class="icon-reorder"></i>Menu</a>
</li>
<!--/ opener -->
<!-- portfolio -->
<li class="dropdown">
<a href="#"><i class="icon-briefcase"></i>Portfolio</a><b></b>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="icon-lemon"></i>Logos</a></li>
<li><a href="#"><i class="icon-globe"></i>Websites</a></li>
<li><a href="#"><i class="icon-th-large"></i>Branding</a></li>
<li><a href="#"><i class="icon-picture"></i>Illustrations</a></li>
</ul>
</div>
</li>
<!--/ portfolio -->
<!-- contacts -->
<li>
<a href="#"><i class="icon-phone"></i>Contacts</a><b></b>
</li>
<!--/ contacts -->
<!-- share -->
<li class="right dropdown">
<a href="#"><i class="icon-bullhorn"></i>Share</a><b></b>
<div class="grid-container3">
<ul>
<li><a href="#"><i class="icon-twitter"></i>Twitter</a></li>
<li><a href="#"><i class="icon-facebook-sign"></i>Facebook</a></li>
<li><a href="#"><i class="icon-pinterest"></i>Pinterest</a></li>
<li><a href="#"><i class="icon-envelope-alt"></i>Email</a></a></li>
</ul>
</div>
</li>
<!--/ share -->
</ul>
<!-- collapsable mega menu -->
When i hardcode the example straight in template page to test it works fine.
http://www.dantehan.com.au/new2/
Re: Responsive menu problem
Posted: Sat May 04, 2013 8:43 am
by velden
The problem probably is in
Code: Select all
.pcss3mm .dropdown > div {
...
margin-top: 6px;
...
}
the margin gives you a 'hole' so that the hover is disrupted.
Re: Responsive menu problem
Posted: Sat May 04, 2013 8:52 am
by midway31
Thanks i will try that but still missing a closing div tag i think
Re: Responsive menu problem
Posted: Sat May 04, 2013 9:08 am
by velden
midway31 wrote:Thanks i will try that but still missing a closing div tag i think
True, there are a lot of validation errors on the page. I'd suggest to start over with a default menu template. And carefully add your own logic. And of course when you open a div somewhere you need to close it in the end. If opened within {if} block, you need to use the same conditions when closing it.
Re: Responsive menu problem
Posted: Sat May 04, 2013 9:10 am
by midway31
Ok that worked a treat but still the section header(Fighting for what Wannon needs) does not show drop downs in ipad the other drop downs work fine. Any suggestions?