Tweet
Hallo zusammen,
nach längerem Suchen habe ich ein Menü gefunden, das, bis auf eine Kleinigkeit, dem entspricht was ich brauche. Es muss zwar vom Design und anderen Aspekten her noch angepasst werden, aber die Basis stimmt.
Nun mein Problem. Wenn man mit der Maus drüber fährt, blenden sich die Ebenen ein. Soll auch so sein. Wenn ich einen Link anklicke, wird dieser auch entsprechend dargestellt. Auch das soll so sein.
Wenn ich aber nun mit der Maus vom Menü runter gehe, blended sich alles wieder aus. Ziel ist es, dass das Menü "offen" bleibt wenn die Maus runterbewegt wird. So das man immer sieht welcher Menüpunkt aktiv ist.
Ich bin der Held in jscript. Daher post ich mal das was ich habe. Vielleicht kann mir ja jemand weiterhelfen.
Besten Dank im voraus ! ! !
Gruß
Michael
Die Menüstruktur:
Das zugehörige css:
Und noch das jscript dazu:
nach längerem Suchen habe ich ein Menü gefunden, das, bis auf eine Kleinigkeit, dem entspricht was ich brauche. Es muss zwar vom Design und anderen Aspekten her noch angepasst werden, aber die Basis stimmt.
Nun mein Problem. Wenn man mit der Maus drüber fährt, blenden sich die Ebenen ein. Soll auch so sein. Wenn ich einen Link anklicke, wird dieser auch entsprechend dargestellt. Auch das soll so sein.
Wenn ich aber nun mit der Maus vom Menü runter gehe, blended sich alles wieder aus. Ziel ist es, dass das Menü "offen" bleibt wenn die Maus runterbewegt wird. So das man immer sieht welcher Menüpunkt aktiv ist.
Ich bin der Held in jscript. Daher post ich mal das was ich habe. Vielleicht kann mir ja jemand weiterhelfen.
Besten Dank im voraus ! ! !
Gruß
Michael
Die Menüstruktur:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>2D-Ausklappmenu</title> <link rel="stylesheet" type="text/css" href="2d-nav.css"> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body {behavior: url(csshover.htc); font-size: 100%;} #menu ul li a {height: 1%;} } </style> <![endif]--> </head> <body> <div id="menu"> <ul> <li><h2>Titel 1</h2> <ul> <li><a href="#">eins</a></li> <li><a href="#">zwei ...</a> <ul> <li><a href="#">zwei a</a></li> <li><a href="#">zwei b</a></li> <li><a href="#">zwei c</a></li> <li><a href="#">zwei d</a></li> </ul> </li> <li><a href="#">drei ...</a> <ul> <li><a href="#">drei a</a></li> <li><a href="#">drei b ...</a> <ul> <li><a href="#">drei b i</a></li> <li><a href="#">drei b ii</a></li> <li><a href="#">drei b iii</a></li> </ul> </li> <li><a href="#">drei c</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>Titel 2</h2> <ul> <li><a href="#">eins</a></li> <li><a href="#">zwei ...</a> <ul> <li><a href="#">zwei a</a></li> <li><a href="#">zwei b</a></li> <li><a href="#">zwei c</a></li> <li><a href="#">zwei d</a></li> </ul> </li> <li><a href="#">drei ...</a> <ul> <li><a href="#">drei a</a></li> <li><a href="#">drei b ...</a> <ul> <li><a href="#">drei b i</a></li> <li><a href="#">drei b ii</a></li> <li><a href="#">drei b iii</a></li> </ul> </li> <li><a href="#">drei c</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>Titel 3</h2> <ul> <li><a href="#">eins</a></li> <li><a href="#">zwei ...</a> <ul> <li><a href="#">zwei a</a></li> <li><a href="#">zwei b</a></li> <li><a href="#">zwei c</a></li> <li><a href="#">zwei d</a></li> </ul> </li> <li><a href="#">drei ...</a> <ul> <li><a href="#">drei a</a></li> <li><a href="#">drei b ...</a> <ul> <li><a href="#">drei b i</a></li> <li><a href="#">drei b ii</a></li> <li><a href="#">drei b iii</a></li> </ul> </li> <li><a href="#">drei c</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
Das zugehörige css:
Code:
#menu { width: 80px; background: #eee; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px; border-style: solid; border-color: #ccc #888
#555 #bbb;
margin: 0; padding: 2px 3px; }
#menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase;
}
#menu a { color: #000; background: #efefef; text-decoration: none; }
#menu a:hover { color: #a00; background: #fff; }
#menu a:active { color: #f00; background: #00f; }
#menu li { position: relative; }
#menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
Und noch das jscript dazu:
Code:
<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>
Kommentar