RE: [Ovillo] efecto en menu desplegable con css
Vamos a ver, esto está bastante bien descrito en el ejemplo de HTMLDOG: http://www.htmldog.com/articles/suckerfish/dropdowns/ Es necesario utilizar javascript porque IE -y algún otro navegador..- no soportan el :hover en los LI y en otros tags. http://www.meyerweb.com/eric/css/edge/menus/demo.html En vez de utilizar javascript, se puede utilizar un behaviour para CSS en IE, creo que el mejor es este: http://www.xs4all.nl/~peterned/csshover.html El problema que tiene este, es que los estilos del tipo: li:hover > li No le "gustan", y tienes que escribirlos así: li:hover li Con lo cuál hay veces que no hace el menú exactamente lo que quieres.. Aunque jugando un poco con el !important en las reglas CSS definidas, normalmente se suele solucionar. Así mismo, tanto el jS como el behaviour se deben de incluir con un comentario condicional de IE http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Espero os sea útil. Un saludo. > -Mensaje original- > De: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] En nombre de "Choan > C. Gálvez" > Enviado el: viernes, 13 de enero de 2006 10:17 > Para: Ovillo, la lista de CSS en castellano > Asunto: Re: [Ovillo] efecto en menu desplegable con css > > Fernando Graells escribió: > > 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. > > ¿Por qué? ¿Acaso Internet Explorer no soporta javascript? > > > sfEls[i].onmouseover=function() { > > this.className+=" sfhover"; > > } > > sfEls[i].onmouseout=function() { > > this.className=this.className.replace(new > > RegExp(" sfhover\\b"), ""); > > } > > Cuidadín con esto que no siempre va a funcionar, algunos > navegadores (no > recuerdo cuales) se "comen" el espacio (el de `" sfhover"`) > al añadirlo > a un `className` vacío. Tampoco estoy muy convencido de que > esa RE sea > correcta. > > Para añadir/quitar nombres de clase, te recomiendo utilizar algo > parecido a `toggleClassName` [1]. > > Por otra parte, cuidado con sobrescribir manejadores ya definidos. > > [1]: > http://lists.scriptia.net/pipermail/javaescript-scriptia.net/2 005-November/38.html > (tirando pa' bajo) > > Salud, > Choan > > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente > dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] efecto en menu desplegable con css
Fernando Graells escribió: 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. ¿Por qué? ¿Acaso Internet Explorer no soporta javascript? sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } Cuidadín con esto que no siempre va a funcionar, algunos navegadores (no recuerdo cuales) se "comen" el espacio (el de `" sfhover"`) al añadirlo a un `className` vacío. Tampoco estoy muy convencido de que esa RE sea correcta. Para añadir/quitar nombres de clase, te recomiendo utilizar algo parecido a `toggleClassName` [1]. Por otra parte, cuidado con sobrescribir manejadores ya definidos. [1]: http://lists.scriptia.net/pipermail/javaescript-scriptia.net/2005-November/38.html (tirando pa' bajo) Salud, Choan ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] efecto en menu desplegable con css
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: <!--//--><![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); //--><!]]> 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: /** * HOVER - V1.11.040203 - whatever:hover in IE * - * Peterned - <a rel="nofollow" href="http://www.xs4all.nl/~peterned/">http://www.xs4all.nl/~peterned/</a> * (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; } Espero que te sea de utilidad, no puedo mostrarte ejemplos porque todavía los tengo en desar
Re: [Ovillo] efecto en menu desplegable con css
Renso Vargas escribió: 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. Pues si, si no hay carga de una nueva página la solución pasa por javascript ya que únicamente con css no vas a poder controlar los estados en los que se encuentra cada elemento. Y ojo con la accesibilidad, comprueba que sin javascript se puedan llegar a todos los sitios ;-) -- Saludos -=stripTM=- ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] efecto en menu desplegable con css
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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo