Menu desplegable 100% CSS

[Mikmoro]

Gracias, DragonX.

Y quita el comentario de las FAQ, que te van a banear



Mikel.

[daPhyre]

Tanto yo como mi buscador estamos ciegos. Abrí el CSS del menu 6, y no encuentro "focus" en ningún lado... le pongo buscar al block de notas, y tampoco lo encuentra (No es por nada, pero tampoco le confio mucho). En verdad que estamos ciegos y por eso surgió la duda @.@

[Mikmoro]

Ajá, es que en este caso está en el html:

<style>
#menu ul li:focus ul, #menu ul li:active ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;}
#menu ul li:focus span, #menu ul li:active span {background-color: #6CC;border-bottom: solid 1px #6CC;color: #000;}
</style>

Como expliqué en el post #48

era necesario ponerlo en el html para que funcionara bien.

La expicación es: un elemento "li" no acepta el foco porque sí, ya que no es un enlace ni nada, pero si se le pone un tabindex y se pone el selector css en el propio html se le hace funcionar correctamente. Me costó un poco encontrarlo, pero cayó.

Mikel.

[Carxl]

Hola a todos, cómo van??

Del putas los menús Mikmoro!! Gracias por compartirlos

Una duda... si lo quisiera mejorar semánticamente, se podría?? Es que pensaría que se trata de jerarquías y definiciones no? O estoy equivocado??

En vez de hacerlo con ul y li, intentaría hacerlo con dd, dl, dt, no?? Estoy mal? Es que me surgió una duda, hice alguna vez este menu (en la parte superior de la página), guiado por una pàgina
que lo tenía... Ven que ahí aparece es esta estructura?

Código HTML:

<ul id="menu">				
			<li>
				<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
					<dl>
						<dt><a href="subcategorias.php?id=3&v=1" class="luns">Colchones</a></dt>
								<dd><a href="lineas.php?id=33">Colchones</a></dd>
						
					</dl>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>		
			<li>
				<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
					<dl>
						<dt><a href="subcategorias.php?id=4&v=1" class="luns">Blancos</a></dt>
								<dd><a href="lineas.php?id=11">Hornos de Microondas</a></dd>
								<dd><a href="lineas.php?id=13">Lavadoras</a></dd>
								<dd><a href="lineas.php?id=15">Maquinas de coser</a></dd>
								<dd><a href="lineas.php?id=18">Refrigeradores</a></dd>
						
					</dl>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
</ul> 

Mmmm veo que Mikmoro redujo a ul y li el efecto, pero en el que yo hice esté jerarquizado d, dt, dd... Redondeando la pregunta que hice mas arriba, si cogemos la idea de Mikmoro (reduce código) y la del menú de la página (está jerarquizado) podríamos tener un menú 100% en CSS y semánticamente mejor?
Ó estoy hablando carreta???:-p

Saludos

[Mikmoro]

Bueno, algún experto tendrá una opinión más cualificada que la mia, pero a mi entender, las lista de definición son para definir cosas, estilo diccionario. Para las listas de elementos como son lo enlaces, me parece más adecuado usar "ul", una lista desordenada.

Si yo hiciera un:

XHTML:
Es un lenguaje derivado.....

CSS:
Se trata de un distema de...

Entonces usaría listas de defición, pero en el caso de listas de enlaces, no lo usaría nunca, porque no defino nada, sólo proporciono una lista de elementos, en este caso, enlaces.

Yo lo veo así.

Mikel.

P.D.: ¿alguna vez te he dicho algo sobre tu firma

[Carxl]

Hola Mikmoro!!! milagro en verte jejeje

Mira es que edité el comentario, lo vuelves a leer porfa??

PDT: Creo que nunca me haz dicho nada de mi firma!!! Por que??

Saludos Mikel

[Mikmoro]

Por otro hilo donde lo comentamos, yo creo que tienes una pequeña confusión con los dl, dt y dd.
¿Qué te hace pensar que con esas etiquetas está mejor jerarquizado el menú? Es una posibilidad, pero creo que es menos semántica, por lo que te he dicho en el post anterior: en el menú no veo ninguna lista de definiones, sino una lista de enlaces. Entonces, ¿por qué usar las etiquetas html para hacer listas de definiciones, si no lo son?

Creo que es ahí donde tenemos la duda.

Según la W3C:

Las listas de definiciones sólo difieren levemente de los otros tipos de listas, en que los objetos de lista consisten en dos partes: un término y una descripción. El término viene dado por el elemento DT y está restringido a contenido en línea. La descripción viene dada por un elemento DD que contiene contenido en bloque.

Fuente: http://html.conclase.net/w3c/html401-es/cover.html

¿Son las listas de enlaces que forman un menú listas compuestas por un término y una descripción? yo creo que no.

Yo creo que quien hizo ese menú lo usó para tener control de tres niveles sobre los elementos, pero probablente obviando la semántica. Y también puede se que en ese momento no se usara mucho el anidar listas completas "ul" dentro de elementos de lista "li", pero hoy está a la orden del día.

Mikel.

[Carxl]

Hola de nuevo Mikmoro, se armó esto!!! jejee

Mira yo como lo veo, es que si tenemos un menú desplegable, quiere decir que los links solos (sin pasar el mouse), son los que contienes al listado no?? Por lo tanto son como "títulos" y los links desplegables vendrían siendo "subtítulos". Eso para mi es definir! por que quiere decir que para encontrar los "subtítulos", debes primero encontrar y el "título".

Siendo mas específico, hablamos de Categorías y subcategorías, las subcategorías, definen la categoría...

De esa manera veo esta semántica...

Saludo Mikel

[Mikmoro]

Sí, lo entendemos diferente.

¿Para ti título y subtítulo son como dice la W3C un término y una descripción? No, y esto no es una cuestión de opiniones, es un dato objetivo: descripción tiene un sentido muy exacto, y no se acerca mucho a subtítulo, subsección ni nada parecido.

- CAPÍTULO I
- Artículo 1
- Artículo 2

-CAPÍTULO II
- Artículo 3
- etcétera

¿Artículo 1 es la descripción de capítulo I? No, imposible. Puede ser su desarrollo, su contenido, su división interna, pero nunca su descripción. Y como te digo esto no es una cuestión subjetiva. El cómo lo uses es cuestión de cada uno, pero si hablamos de semántica, basada en el lenguaje que nos une, cada palabra tiene su significado exacto, y en este caso, definición tiene el suyo muy concreto.

Mikel.

[Faisca]

Hola!

Gracias Mikmoro por tus archivos. Ayudan bastante. Tienes razón en cuanto a la analogía con los monos. Yo siempre estoy jugando con estas cosas a ver lo que me sale. Soy diseñadora gráfica y la programación no es mi fuerte, así que necesito la ayuda de quien me la pueda ofrecer.

Me bajé tus archivos y cambié algunas cosas que necesitaba para mi diseño. En un principio, creé uno de los menús y me funcionaba... a medias, en los navegadores, así que decidí hacer el 6, pero con algunos cambios, y en IE no me funciona del todo bien.
Me cambia cosas y es que ya veo doble. Llevo todo el día peleándome con el CSS para que me funcione... y no hay manera.
Envío el enlace aquí a ver si alguien me puede ayudar... estoy desesperándome. Lo que quiero obtener es que me funcione en el IE como en el FF. Una ayudita??
Hola!

Gracias Mikmoro por tus archivos. Ayudan bastante. Tienes razón en cuanto a la analogía con los monos. Yo siempre estoy jugando con estas cosas a ver lo que me sale. Soy diseñadora gráfica y la programación no es mi fuerte, así que necesito la ayuda de quien me la pueda ofrecer.

Me bajé tus archivos y cambié algunas cosas que necesitaba para mi diseño. En un principio, creé uno de los menús y me funcionaba... a medias, en los navegadores, así que decidí hacer el 6, pero con algunos cambios, y en IE no me funciona del todo bien.
Me cambia cosas y es que ya veo doble. Llevo todo el día peleándome con el CSS para que me funcione... y no hay manera.
Envío el enlace aquí a ver si alguien me puede ayudar... estoy desesperándome. Lo que quiero obtener es que me funcione en el IE como en el FF. Una ayudita??
http://cv.uoc.edu/~nperezw/html/drop_down_menu.html
Luego, además, si cambio los "#" por enlaces existentes, ¿cómo me cambiará eso el código del IE? Es decir, esta parte:
<!--[if IE]><a href="#" class="drop_downie">Bilder<table class="false"><tr><td><![endif]-->

En fin, gracias por adelantado por cualquier ayuda que me puedan ofrecer:)

N.
Luego, además, si cambio los "#" por enlaces existentes, ¿cómo me cambiará eso el código del IE? Es decir, esta parte:
<!--[if IE]><a href="#" class="drop_downie">Bilder<table class="false"><tr><td><![endif]-->

En fin, gracias por adelantado por cualquier ayuda que me puedan ofrecer:)

N.

[Mikmoro]

Mañana en cuanto pueda le echo un vistazo, a ver qué se ve. Revisa tu mensaje, que ha quedado todo el texto duplicado y ha sido un poco difícil de entender.

Como ya dije en este hilo, lo que no me gusta de ese menú es que haya que pulsar para deplegarlo. Yo por usabilidad usaría que se despliegue al pasar el ratón, pero eso es cosa de gustos.

Mikel.

[Faisca]

Hola Mikel,

Gracias y perdón por tener mi mensaje repetido... cosas que pasan... jejeje

Inicialmente lo tenía sin pulsar, pero ese parecía poco estable, aunque yo también lo prefiero. Lo que me pasaba es que no se me quedaba quieto. Es decir, al pasar el ratón por el botón prinicipal (el primer <li>), el "sub-ul" no se quedaba. A veces estaba estable y podía elegir mis botones, otras veces me desaparecía.

Te puedo enviar el enlace a ese tb (que además se ve mejor en IE) y me puedes echar una manita. Esto puede llegar a ser desesperante:(

En fin, muchas gracias por la ayuda, y aquí está el enlace al que hice sin pulsar, aunque me gustaría que al tener el botón seleccionado, se me quedara del color que se selecciona.

http://cv.uoc.edu/~nperezw/html/yoga-massage_sv.html

De momento sólo funciona en esa sección porque lo he estado cambiando para atrás y para alante... jejejej

Un saludo,

N.

[Faisca]

Bueno, después de haber dormido, parece que he resuelto el problema:D

Gracias Mikel de todas formas:)

N.

[Mikmoro]

A veces un sueño reparador hace milagros. No había podido empezar a mirarlo todavía. Me alegro de que lo hayas resuelto. Siento no haber podido ayudarte. Si necesitas algo dilo e intentaré ayudarte.

Mikel.

[Faisca]

Gracias Mikel!

Bueno, ya que estamos, tengo otra duda, a lo mejor me puedes ayudar.
Estoy intentando personalizar mis botoncitos y demás que forman parte de un formulario, pero en los botones de enviar o restablecer no me sale la mano que indica que es un botón, ¿tú sabes por qué puede ser?

Y, otra cosa, ¿sabes si se puede personalizar en CSS los botones que aparecen en un formulario cuando se elige de un menú desplegable? ¿Hay manera de hacer?

Me explico? Por ejemplo, en esta web, con ejemplos de formularios, en la sección de One Choice Drop-Down Field: red, se puede dar en el botón con la flechita y elegir otras opciones. Pues bien, esa imagen con la flechita, ¿la puedo cambiar en CSS?

Te agradecería cualquier ayuda:)

Muchas gracias!

[enjuto_9]

Yo tengo otro problema: tengo otro menu en mi pagina ; tambien es con css:

Código:

/*menu horizontal*/



.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}

.menu1 li {float:left;}

.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}

.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}

.menu1 li.current a {color:#fff; background:url(images/button3.gif);}

.menu1 li.current a b {background:url(images/button3.gif) no-repeat right top;}

.menu1 li a:hover {color:#fff; background:#000 url(images/button2.gif);}

.menu1 li a:hover b {background:url(images/button2.gif) no-repeat right top;}

.menu1 li.current a:hover {color:#fff; background:#000 url(images/button3.gif); cursor:default;}

.menu1 li.current a:hover b {background:url(images/button3.gif) no-repeat right top;}
.menu1 li.espacio a {float:right;}

.menu1 li.espacio a b {}

.usuario {
	padding: 0px 20px 4px 0px;

	font-size:11px;

	font-weight:bold;

	color:#000;
	float:right; 
	height:35px; 
	line-height:35px; 
	color:#fff; 
	text-decoration:none; 
	font-size:11px;
}

/*menu horizontal*/

y con este codigo en mi estilos.css no me funciona el menu 6 vertical.
Si borro esta parte del css, el menu 6 vertical funciona perfectamente en ie.

Que puede ser??? me está volviendo loco.

Salu2.

[Mikmoro]

Iniciado por Faisca

Gracias Mikel!

Bueno, ya que estamos, tengo otra duda, a lo mejor me puedes ayudar.
Estoy intentando personalizar mis botoncitos y demás que forman parte de un formulario, pero en los botones de enviar o restablecer no me sale la mano que indica que es un botón, ¿tú sabes por qué puede ser?

Hola, Faisca.
Creo que los moderadores te agradecerían que abrieras un tema nuevo si se trata de un asunto completamente diferente, más que nada por un tema de organización y porque si se encuentra una solución satisfactoria quede accesible o "encontrable" para otros usuarios con dudas similares.

Supongo que habrás visto que donde pones "esta web" no ha salido nada. Podrías poner el código css y html que estás usando para ver qué ocurre y qué quieres conseguir.

Mikel.

[Mikmoro]

Iniciado por enjuto_9

Yo tengo otro problema: tengo otro menu en mi pagina ; tambien es con css:

De la misma manera, enjuto_9, creo que sería recomendable seguir esta conversación donde se quedó en el hilo que estaba iniciada, ya que creo que el asunto es el mismo. Es decir, aunque hayas cambiado de menú, sigues con la misma css (o casi) y con el mismo problema o similar.

Yo te pediría que, además de seguirlo en ese hilo, indicaras un enlace donde poder verlo o pusieras el código html y css completo que estás usando para intentar desentrañar el problema.

Sí te puedo decir que es problable que no te funcione porque el meollo de la cuestión de esos menús está en usar el html y la css correcta con mucho cuidado, porque cualquier detalle por pequeño que prezca es importante, y si no fallará muy fácilmente.

Mikel.

[Faisca]

Iniciado por Mikmoro

Hola, Faisca.
Creo que los moderadores te agradecerían que abrieras un tema nuevo si se trata de un asunto completamente diferente, más que nada por un tema de organización y porque si se encuentra una solución satisfactoria quede accesible o "encontrable" para otros usuarios con dudas similares.

Supongo que habrás visto que donde pones "esta web" no ha salido nada. Podrías poner el código css y html que estás usando para ver qué ocurre y qué quieres conseguir.

Mikel.

Hola Mikel,

Tienes razón, fallo de novata:$.
Bueno, de todas formas, ya no tengo esa duda... y siento haberlo mandado a este hilo, como dije, fallo mío.
Lo tendré en cuenta para aportaciones futuras:)

N.

[Mikmoro]

Ahá, parece que te basta con preguntar para que se te ocurra la respuesta
Yo creo que a mi también me pasa de vez en cuando, y a casi todo el mundo

Pues nada, otra vez solucionado y sin ayuda

Saludos.

Mikel.

[enjuto_9]

Iniciado por Mikmoro

De la misma manera, enjuto_9, creo que sería recomendable seguir esta conversación donde se quedó en, ya que creo que el asunto es el mismo. Es decir, aunque hayas cambiado de menú, sigues con la misma css (o casi) y con el mismo problema o similar.

Yo te pediría que, además de seguirlo en ese hilo, indicaras un enlace donde poder verlo o pusieras el código html y css completo que estás usando para intentar desentrañar el problema.

...
Mikel.

Tienes razón, lo que pasa es que estoy un poco cansado de intentar solucionarlo, he cambiado varias veces el menu y no he conseguido nada.

Mañana pondré todo el código para ver si lo podemos seleccionar, pero yo todavía no puedo poner enlaces, soy muy nuevo en el foro...

Saludos, y gracias.

[Mikmoro]

Si lo tienes en algún servidor ponlo sin http ni www y podremos acceder. Si no, pon el código, aunque si como hablamos el problema está en el htc, con el html poco podremos hacer.

Mikel.

[enjuto_9]

Iniciado por Mikmoro

Si lo tienes en algún servidor ponlo sin http ni www y podremos acceder. Si no, pon el código, aunque si como hablamos el problema está en el htc, con el html poco podremos hacer.

Mikel.

La direccion es:
www.pcrednet.com < esta es la buena... aqui esta el archivo htc: www.pcrednet.com/templates/default/csshover.htc
www.pcrednet.com/templates/default/estilos.css


y en esta estoy probando los menus nuevos:
demo.pcrednet.com/tienda < esta es de prueba, si algo no funciona bien, es que estoy liado con ella...

Saludos!!!

Enjuto!!!

[Bill Gates]

La pregunta del millon como inserto este menu en mi pagina echa en XHTML Y CSS, en un div o en una capa no entiendo, alguien me podria ayudar un poco

[Shiryu_Libra]

oye Mik, debo decirte que prove tu menu sobre el IE8 (si ya se, ando provando betas), y sale perfectamente

gracias por el aporte

[gepd]

Spungo que en IE8 todo código que cumpla con los estandares funcionará perfectamente, ya que microsoft primera vez que lo hace con una version de su navegador...

[enjuto_9]

Iniciado por Mikmoro

Si lo tienes en algún servidor ponlo sin http ni www y podremos acceder. Si no, pon el código, aunque si como hablamos el problema está en el htc, con el html poco podremos hacer.

Mikel.

Ya esta:

http://www.forosdelweb.com/f53/menu-vertical-menu-horizontal-solo-css-no-funciona-604143/#post2484728

Todo el codigo, php y css, a ver si hay algún modo de hacerlo funcionar.

Saludos y gracias.

[Mikmoro]

Iniciado por Bill Gates

La pregunta del millon como inserto este menu en mi pagina echa en XHTML Y CSS, en un div o en una capa no entiendo, alguien me podria ayudar un poco

Pues puedes coger desde donde empieza el div "menu" hasta donde termina e insertarlo donde te interese. Luego añadir a la cabecera la llamada a la css y empezar a modificar el menú a tu gusto, los enlaces, etc.. Sí te recomiendo que modifiques las cosas una por una y viendo qué ocurre, porque si no igual se descompone todo y luego cuesta arreglarlo.

Mikel.

[Mikmoro]

Iniciado por Shiryu_Libra

oye Mik, debo decirte que prove tu menu sobre el IE8 (si ya se, ando provando betas), y sale perfectamente

Ah, pues me alegro, porque no había podido probarlo en el 8. Yo de momento ni rozarlo. A ver si es cierto lo que dice gepd y respeta de una vez, aunque eso no evitará tener que seguir diseñando para IE6 y 7 de momento.

Mikel.

[Bill Gates]

Como inserto el menu en mi codigo xhtml a 3 columnas..
CODIGO


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MI WEB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="base1.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="STYLESHEET" type="text/css" href="baseIE.css" />
<![endif]-->
<style type="text/css">
<!--
.Estilo1 {color: #000000}
-->
</style>
</head>

<body>
<div id="CONTAINER">
<div class="header"><h1>ensenada</h1>
<p></p>
<p></p>
<p></p>
<p></p>
<p>&nbsp;</p>
</div>
<div class="izquierda"><ul><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li><li><a>vinculo</a></li></ul></div>
<div class="derecha"><p></p> <a href="http://jigsaw.w3.org/css-validator/">

<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />

</a><hr/><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></div>
<div class="principal"><h2>Título del contenido</h2><h3>Subapartado</h3><p>Escribo algo para rellenar...</p><p>Escribo algo para rellenar...</p><h3>2ºSubapartado</h3><h4>Otra secc<span class="Estilo1"></span>ion más pequeña</h4>
<p>Escribo algo para rellenar...</p><p>Escribo algo para rellenar...</p><h4>y otra...</h4><p>Escribo algo para rellenar...</p><p>Escribo algo para rellenar...</p><p>Escribo algo para rellenar...</p></div>

<div class="footer"><h6>E</h6></div>

</div>
</body>
</html>