Work-Around für IE?

[sandii]

Hallo,

ich habe auf meiner HP ein horizontales Menu mit Aufklapp-Funktion. Im Firefox und Opera funktioniert dieses wunderbar, nur der doofe IE will nicht. Gibt es da eine Möglichkeit, evtl. ein kleines Workaround für den IE zu schreiben? Wie stelle ich das am besten an?

Hier mal der Javascript-Teil:

Code: Alles auswählen

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Und hier der CSS-Teil:

Code: Alles auswählen

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
font-size: 12;
}
#nav li ul {
position: absolute;
width: 10em;
left: -300em; 
font-size: 8;
text-align: left;
}
#nav li:hover ul {
left: auto;
}

Und hier ein Teil des HTML-Codes:

Code: Alles auswählen

<div id="navigation">
<li>MenuPunkt 1
	<ul>
	<li><a href="xxx">MenuPunkt 1a</a></li>
	<li><a href="xxx">MenuPunkt 1b</a></li>
	</ul>
</li>
<li>MenuPunkt 2
	<ul>
	<li><a href="xxx">MenuPunkt 2a</a></li>
	<li><a href="xxx">MenuPunkt 2b</a></li>
	<li><a href="xxx">MenuPunkt 2c</a></li>
	</ul>
...
</div>

Es würde mir schon helfen, wenn ich wüßte, was genau da dem IE Probleme bereitet.

Danke.

[riddy]

ja der ie ^^

vieleicht hilft dir das:

Code: Alles auswählen

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *Whatever:hover - V1.41.050927 - hover & active
 *------------------------------------------------------------
 *(c) 2005 - Peter Nederlof
 *Peterned - http://www.xs4all.nl/~peterned/
 *License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *Whatever:hover is free software; you can redistribute it and/or
 *modify it under the terms of the GNU Lesser General Public
 *License as published by the Free Software Foundation; either
 *version 2.1 of the License, or (at your option) any later version.
 *
 *Whatever:hover is distributed in the hope that it will be useful,
 *but WITHOUT ANY WARRANTY; without even the implied warranty of
 *MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *Lesser General Public License for more details.
 *
 *Credits and thanks to:
 *Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *howto: body { behavior:url("csshover.htc"); }
 *------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++) 
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}

function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = { 
node:node, type:type, handler:handler 
};
}

function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i]; 
e.node.detachEvent(e.type, e.handler);
}
}

function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
}return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) return [doc.getElementById(identify[1])];

var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all; 
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}return nodes;
}
</script>

[sandii]

Danke.

[vI3Tz]

Kann es sein, das dadurch der Seitenaufbau im IE sehr langsam wird?
Ist bei mir zumindest der Fall!
Siehe hier!