Drop menu: doesnt drop with ie6 [Archive]

ratter

01-19-2010, 09:02 AM

Hi everyone,
In order to get a 2 itmes menu + drop menu when first menu item is hovered, I supplied the following code:

<style type="text/css" media="all">
body { behavior:url(csshover.htc);}
div#wrapper * {margin:0; padding:0;behavior:url(csshover.htc);}
#wrapper {border:1px solid #686;float:left;font-family:lucida, arial, sans-serif;}
#wrapper ul {float:left;border:2px solid red;}
#wrapper li {border:2px solid blue; list-style-type:none; float:left;}
#wrapper a
{
background-color:#DDD;
padding: .3em 6px;
display:block;
}
#wrapper a:hover {color:#ccc; background-color:#666;}
#wrapper li ul {position:absolute; width:7em;display:none;}
#wrapper li ul li {width:100%;}
#wrapper li:hover ul {position:absolute; width:7em;display:block;}
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</body>
</html>

With "Google chrome" it worked fine, with ie6 id did not. I was advised to add a style: body { behavior:url(csshover.htc);}

and so i did but the drop menu still doesn't show up with ie6. Can i get help with this ?
Thanks

ohiowebpro

01-28-2010, 09:34 PM

The behavior url you apply to the body is referring to a file called csshover.htc

save the following code in a file with the above file name, and upload to your server in the same directory. Note that this is considered a "hack" to make IE comply, but it does work.

The code was written by Peter Nederlof and has floated around the internet a while.

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var CSSBuffer, doc = window.document;

function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');

buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];

for(var i=0; i<sheets.length -1; i++) {
sheet = sheets[i];
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);

var affected = select.replace(/\:hover.*$/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements[i].nodeName == 'A') continue;
new HoverElement(elements[i]);
}
}

/**
* HoverElement
* -------------------------
* applies the hover
*/

function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });

element.attachEvent('onmouseout',
function() { element.className = element.className.replace(/onHover/g, ''); });
}

/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/

function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets[i], nodeList);
} return nodeList;
}

var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs[i].getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},

filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr]))
filtered[filtered.length] = nodes[i];
} return filtered;
}
}
</script>