Yo estoy programando varias páginas utilizando un menú de este tipo.
La única opción es utilizar javascript para los navegadores estandar FF
y Opera y un htc para internet explorer.
Te adjunto el script:
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls =
document.getElementById("contenedora").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);
//--><!]]></script>
Lo que hace es detectar cuando pongo el ratón sobre una subopción del
menú(LI) y cambiar el estilo de la opción padre.
Aparte creo un fichero de texto con el nombre "csshover.htc" y lo cargo
mediante la hoja de estilos con:
body {
behavior:url("js/csshover.htc");
}
Este archivo tiene el siguiente código:
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.11.040203 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2004 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* for finding some really -sick- bugs
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document;
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
var l, rules, imports;
if(sheet.imports) {
imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++)
parseStylesheet(sheet.imports[i]);
}
rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
}
function parseCSSRule(rule) {
var select = rule.selectorText, style =
rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^
]+)+)):hover/i).test(select)) return;
var newSelect =
select.replace(/(\.([a-z0-9_-]+):hover)|(:hover)/g, '.$2onHover');
var hasClass =
(/(\.([a-z0-9_-]+):hover)/g).exec(select);
var className = (hasClass? hasClass[2]:'') + 'onHover';
var affected = select.replace(/:hover.*$/g, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className);
}
function HoverElement(node, className) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent('onmouseover',
function() { node.className += ' ' + className; });
node.attachEvent('onmouseout',
function() { node.className =
node.className.replace((new
RegExp('\\s+'+className)),''); });
}
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 classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = (/^[a-z0-9]+/i).exec(select.toUpperCase())
|| '*';
for(var i=0; i<elements.length; i++) {
result =
elements[i].getElementsByTagName(tagName);
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1])
|| (classname && !(new RegExp('\\b' +
classname[1] +
'\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
Espero que te sea de utilidad, no puedo mostrarte ejemplos porque
todavía los tengo en desarrollo.
Atentamente
Fernando Graells
------------------------------
Message: 8
Date: Wed, 11 Jan 2006 12:09:04 -0500
From: Renso Vargas <[EMAIL PROTECTED]>
Subject: [Ovillo] efecto en menu desplegable con css
To: [email protected]
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Estoy construyendo un menu desplegable con CSS y me he enfrentado al
siguiente requerimiento:
Cuando se seleccione una opcion y se desplieguen sus subOpciones al
seleccionar una de estas subopciones la opcion padre debe seguir con el
efecto del rollover. bien sea un cambio de color o un cambio de imagen
(espero ser claro). he buscado varias de formas de hacerlo y parece q la
solucion es javascript.
* *op1<-*
**subop1*<-
*subop1
*subop1
* op1
* op1
mi pregunta es si alguno de los integrantes de esta lista se ha tenido q
enfrentar a algo similar y si conoce una solucion.
Gracias
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
