menu estilo microsoft, imprescindible javascript?

moNTeZIon · #1 (**permalink**) 12/07/2006, 12:35

Hola gente,
Quisiera conseguir un menu estilo el que tiene microsoft al lado izuierdo, en el aspecto de colorear toda la celda, y el borde, etc, cuando el mouse está encima.
Me planteo cómo hacerlo y no se me ocurre otra forma que haciendo uso de JavaScript, capturando el evento mouseover de la celda que contiene el link, y capturar el evento click para redireccionar al destino que apunta el link de su interior.
Es posible hacer esto por medio de css únicamente? Viendo el code de microsoft tampoco veo las funciones onmouseover, etc... Quizá no sé verlo, sabrían decirme?
Un saludo

moNTeZIon · #2 (**permalink**) 12/07/2006, 12:44

Les paso por ejemplo esta page: http://www.microsoft.com/spain/forma...p/default.mspx
Si ya, solo funcionará en explorer, pero bueno, habrá la "buena" forma de conseguir eso?

sjam7 · #3 (**permalink**) 12/07/2006, 12:45

una pregunta...si crees que es javascript por que preguntas en el CSS?

sera que sin querer le atinaste a que es con CSS?

Creo que en las FAQ's esta la respuesta, si no la busco y la publico, aunque usando el buscador quizas la encuentres mas pronto

webosiris · #4 (**permalink**) 12/07/2006, 13:38

Cita:

Iniciado por moNTeZIon

capturando el evento mouseover de la celda que contiene el link, y capturar el evento click para redireccionar al destino que apunta el link de su interior.

o me perdí de algo, o te estás ahogando en un vaso de agua

Cita:

Es posible hacer esto por medio de css únicamente?

Claro que si, con un simple :hover... y si querés el menu desplegable es un poco más complejo pero también se puede hacer con solo css..
Acá hay un tutorial - Resultado final del tutorial

Un ejemplo simple (sin desplegable)
Un ejemplo más completo (incluye desplegable)

Un saludo

safe · #5 (**permalink**) 12/07/2006, 13:42

no, no necesitas javascript ni tampoco es necesario que uses una tabla para lograr ese efecto.
Te paso un ejemplo de como hacerlo con CSS.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<style type="text/css">
<!--
ul#menu {
	margin:0;
	padding:0;
	list-style:none;
}
ul#menu li a {
	display: block;
	height:100%;
	background-color:#999;
	padding:5px;
}
ul#menu li a:hover {
	background-color:#666;
	border: 1px solid #000;
}
-->
</style>
</head>
<body>

<ul id="menu">
	<li><a href="#">Enlace 1</a></li>
	<li><a href="#">Enlace 2</a></li>
	<li><a href="#">Enlace 3</a></li>
	<li><a href="#">Enlace 4</a></li>
</ul>

</body>
</html>

moNTeZIon · #6 (**permalink**) 12/07/2006, 17:01

Oye, pues si que me estaba ahogando en un vaso de agua... jeje.
Eso funciona safe. Eso era. Thanks

Pero creo que yo si me perdí algo. Por el efecto que hace, el código css afecta al <li> , ya que el efecto se alarga a todo lo ancho y no solo al link.
Pero de alguna forma el evento click del <li> redirige a la página del link. Eso es lo que me pierdo. Ya investigaremos.
No habia visto css tan a fondo, yo lo utilizaba con lo poco que sabia, pero bueno, se va aprendiendo.
Saludos!

moNTeZIon · #7 (**permalink**) 12/07/2006, 18:11

Muy bueno el tutorial webosiris. Ahora conseguí ese menú por fin!
Gracias!

safe · #8 (**permalink**) 12/07/2006, 21:26

Cita:

Iniciado por moNTeZIon

Pero creo que yo si me perdí algo. Por el efecto que hace, el código css afecta al <li> , ya que el efecto se alarga a todo lo ancho y no solo al link.
Pero de alguna forma el evento click del <li> redirige a la página del link.

El "efecto" no afecta a li, solo afecta al link. Pasa que con las propiedades de CSS hice que el link ocupe todo el ancho y el alto de la celda. Dentro del link esta el texto, pero eso no quiere decir que solo el texto sea el link.

moNTeZIon · #9 (**permalink**) 13/07/2006, 02:04

Wow!
Entonces, esto: ul#menu li a:hover
Afecta al aspecto de un elemento <a> (sin class ni id) , en su estado hover, que a su vez esté dentro de un <li> (sin class ni id) y éste, a su vez, esté dentro de un <ul>, ahora si, este último con el id="menu".

Digamos que asignando un id a un contenedor y trabajando de esta forma, podría definir el aspecto de cualquier tag de su interior, que no tenga especificado un class ni un id?

Gracias! Me resultó muy útil este hilo!

safe · #10 (**permalink**) 13/07/2006, 08:25

Cita:

Afecta al aspecto de un elemento <a> (sin class ni id) , en su estado hover, que a su vez esté dentro de un <li> (sin class ni id) y éste, a su vez, esté dentro de un <ul>, ahora si, este último con el id="menu".

Claro, de hecho si el UL no tuviera ningun id definido y en el css pusieramos asi 'ul li a:hover' afectaria a todos los elementos A (en su estado hover) del documento HTML que estuvieran dentro de un LI que a su vez estuviera dentro de un UL.

moNTeZIon · #11 (**permalink**) 13/07/2006, 08:38

Yeah! Muchas Gracias Man!
He estado probando un poco y estoy alucinando.
Si, ya se, acabo de descubrir la sopa de ajo, pero bueno, eso no quita haber descubierto algo nuevo para mi.
Un saludete a todos!
Nos vemos por aqui...