Menu section header not clickable

[piere123]

Hi, I have created a website and the menu section headers are clickable. I have never had this before. It would be appreciated if someone can point me where I have gone wrong. Below is the menu stylesheet and the menu template I am using.

Thanks in advance.

Mark

Menu Stylesheet

Code: Select all

#wrapper { 
        overflow: hidden; 
/*        background-color: #810000;*/
  background-image: url(/uploads/lewis2/menu1.gif);
        width: 920px;
height:50px;
        color: white;

        }

  /* MENU */
        div#menu_horiz {
            margin: 0;
            padding: 0px;
            width: 920px;
            background-color: #810000;
            color: white;
        }

    /* MENU */

ul#primary-nav {
/* pushes the menu div up to give room above for background color to show */
	padding-top: 10px;
/* keeps the first menu item off the left side */
	padding-left: 25px;
}


/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li { 
        width: 200px; 
margin-left:200px;

       }


/* Unless you know what you do, do not touch this */ 

#primary-nav, #primary-nav ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px; 
	}

#primary-nav ul { 
	position: absolute; 
	top: auto; 
	display: none; 

	}

#primary-nav ul ul { 
	margin-top: 1px;
	left: 100%; 
	top: 0px; 
	}
	
#primary-nav li { 
	float: left; 
	}

#primary-nav li li { 
	margin-left: 0px;
	margin-top: -1px;
	float: none; 
	position: relative;

	}

/* Styling the basic apperance of the menu elements */

#primary-nav a { 
	display: block; 
	margin: 0px; 
	padding: 5px 8px; 
	text-decoration: none; 
        color: white;
	}
#primary-nav li a {

	}
#primary-nav li li a { 
	border: 1px solid white;

	}	
#primary-nav li { 
/*       font: bold 16px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;*/
       font: bold 14.6px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;




	}


 #primary-nav li.menuparent { 
/*background-image: url(/uploads/macuisine/arrow.gif);
margin-left:2px; 
	background-position: center right; 
	background-repeat: no-repeat; 
*/

	}

ul#primary-nav li a.menuactive {
	/*color: #000;*/
/* bold to set it off from non active */
	font-weight: bold;
text-decoration: underline;
}
ul#primary-nav li a.menuactive:hover {
	/*color: #000;*/
text-decoration: underline;
/* keep it the same */
	font-weight: bold;
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

/*#primary-nav li.menuactive { */
/*	background-color: #999999;*/ 
/*text-decoration: underline; */

/*	}*/


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth { 
	/*background-image: url(/uploads/macuisine/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat; */
	}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { 
	/*border-left: 1px solid white;
        border-right: 1px solid white;*/
        font-weight: bold;
/*text-decoration:underline;*/


	}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { 
	display: none; 
        font-weight: normal;
	}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul { 
	display: block; 
        font-weight: normal;
z-index:1000;
background-image: url(/uploads/lewis2/drop_down_bkg.jpg);


	}


/* IE Hacks */

#primary-nav li li { 
	float: left; 
	clear: both; 
	}
#primary-nav li li a { 
	height: 1%; 
	}
-->

Menu 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 id="primary-nav">
{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="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" {else}
	<li><a {/if}
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}>{$node->menutext}</a>{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
</div>
{/if}

[Dr.CSS]

Note that that menu template has no calls for sectionheaders, which in your case are most likely parents so they will take on the parent calls/actions of that menu template...

[piere123]

What does the section header call look like?

Mark

[Dr.CSS]

{* 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. *}

{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}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}"
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li><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="menuparent"><a class="menuparent"
{else}
<li>
<a
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

[piere123]

Hi,

Thanks for that. Now when I chose a child menu item, the associated section header now becomes clickable. Also when viewing the website on a ipad or iphone the drop down menu stops working.

Do I need to add css to resolve this? If so what do I need to add? I am struggling to get my head around the menu manager and the associated menu css.

Any help would be appreciated.

Thanks,

Mark

[Dr.CSS]

I have heard that drop menus have a hard time on iphones, I don't have one so can't test to fix it, sorry...

[piere123]

Hi,

Before changing the menu template it worked on the iphone. The problem maybe the sectionheader has no css referance and I don't know what to put in there?

Mark

[Dr.CSS]

You can make the sectionheader, add children, go back to sectionheader and turn it into an internal link to first child page under it...