Page 1 of 1

[RESOLVED] horizontal menu IE7 no drop down.

Posted: Fri Apr 15, 2011 4:35 am
by rotezecke
Hi,
i inherited a website that uses a dropdown menu from Stu Nicholls.
the working version can be seen here:
http://www.rpc.com.au
i installed base cmsms 1.9.4.1, created a template based on the default template (nblue?) and modified the cssmenu_ulshadow with an additional if statement to generate the code i want

Code: Select all

{* CSS classes used in this template:
#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}

<ul id="nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
  {repeat string='<ul class="sub">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
  {* repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->prevdepth-$node->depth *}
  {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
  </li>
  {elseif $node->index > 0}</li>
{/if}
{**********my addition here: ********************}
{if $node->depth == 1}
<li class="top"><a class="top_link" href="{$node->url}"><span class="down">{$node->menutext}</span></a>

{elseif $node->parent == true or $node->current == true}
	{assign var='classes' value='menuactive'}
	{if $node->parent == true}
	{assign var='classes' value='menuactive'}
	{/if}
	{if $node->children_exist == true and $node->depth < $number_of_levels}
	{assign var='classes' value=$classes|cat:' parent'}
	{/if}
	{if $node->type == 'sectionheader'}
	<li class="{$classes}"><a class="{$classes}"><span class="sectionheader">{$node->menutext}</span></a>
	{else}
	<li class="{$classes}"><a class="{$classes}" 
	{/if}
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li><a ><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' and $node->depth > 1}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{* repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->depth-1 *}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>

{/if}
removed the original menu css and added mine from the working website. also added the IE javascript from Stu

Code: Select all

/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/pro_drop_1/stuHover.js */

stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") >= 0)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
the html code looks exactly the same. but the cmsms version does not work in IE7.

i added a few IE hacks i found in this forum, non made a difference.

any idea? the non working menu is here:
removed

cheers, mario

Re: [RESOLVED] horizontal menu IE7 no drop down.

Posted: Sat Apr 16, 2011 3:18 am
by rotezecke
position:relative and z-index were not properly set on parent elements. now working in ie7. cheers