Responsive menu problem

midway31 · Post by **midway31** » Fri May 03, 2013 4:17 am

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.

oliverseddon · Post by **oliverseddon** » Fri May 03, 2013 9:36 am

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}

elkman · Post by **elkman** » Fri May 03, 2013 3:37 pm

Viewing your site it appears the above menu solution worked. Did it?

Elkman

midway31 · Post by **midway31** » Fri May 03, 2013 9:48 pm

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.

oliverseddon · Post by **oliverseddon** » Fri May 03, 2013 9:56 pm

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}

midway31 · Post by **midway31** » Sat May 04, 2013 6:01 am

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;">&nbsp;</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;">&nbsp;</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/

Post by **velden** » Sat May 04, 2013 8:43 am

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.

midway31 · Post by **midway31** » Sat May 04, 2013 8:52 am

Thanks i will try that but still missing a closing div tag i think

Post by **velden** » Sat May 04, 2013 9:08 am

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.

midway31 · Post by **midway31** » Sat May 04, 2013 9:10 am

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?

CMS Made Simple Forums

Responsive menu problem

Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem

Re: Responsive menu problem