[RESOLVED] horizontal menu IE7 no drop down.
Posted: Fri Apr 15, 2011 4:35 am
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
removed the original menu css and added mine from the working website. also added the IE javascript from Stu
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
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;"> </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;"> </li></ul>' times=$node->depth-1 *}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
{/if}
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);
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