Foros del Web » Creando para Internet » CSS »

menu estilo microsoft, imprescindible javascript?

Estas en el tema de menu estilo microsoft, imprescindible javascript? en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 12/07/2006, 13:35
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
menu estilo microsoft, imprescindible javascript?

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)  
Antiguo 12/07/2006, 13:44
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
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?
__________________
..:: moNTeZIon ::..
  #3 (permalink)  
Antiguo 12/07/2006, 13:45
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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
  #4 (permalink)  
Antiguo 12/07/2006, 14:38
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 12/07/2006, 14:42
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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> 
__________________
oohh... quisiera ser godines!!!
  #6 (permalink)  
Antiguo 12/07/2006, 18:01
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
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)  
Antiguo 12/07/2006, 19:11
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Muy bueno el tutorial webosiris. Ahora conseguí ese menú por fin!
Gracias!
__________________
..:: moNTeZIon ::..
  #8 (permalink)  
Antiguo 12/07/2006, 22:26
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!
  #9 (permalink)  
Antiguo 13/07/2006, 03:04
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
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!
__________________
..:: moNTeZIon ::..
  #10 (permalink)  
Antiguo 13/07/2006, 09:25
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!
  #11 (permalink)  
Antiguo 13/07/2006, 09:38
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
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...
__________________
..:: moNTeZIon ::..
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:25.