Comunidad de diseño web y desarrollo en internet online

Ayuda con Menú usando rollover

Citar            
MensajeEscrito el 16 May 2009 10:06 pm
Bueno verán, primero que nada Buenas, este es mi primer mensaje acá :)


El tema es el siguiente, estoy diseñando un sitio web y me quedé trabado en la parte del menu principal. Mi idea es que el menu sea del tipo "sidenav" es decir a la izquierda, que se vea siempre, y además usando rollover y una sola imagen.


Iba bien hasta que me llegó la complicacion de que el efecto que le quise dar a los menús en el momento del hover, me obliga a no solo cambiar las coordenadas de la imagen en el area en donde estoy seleccionando con el mouse, sino tambien a cambiar otras coordenadas que esten fuera de las que estoy parado

Y hasta acá llegue, no se que hacer, busque EN TODOS LADOS pero me está ganando.


Por si los mareé un poco la cosa es asi:



la imagen es una cosa parecida a esto: (aca lo hice en paint porque estoy medio apurado jajajaja)



(aclaro son todas imagenes, no habría texto puesto en el html sino que seria parte de la img)

entienden? lo que yo quiero hacer es que, por ejempo cuando seleccionas el mouse sobre "DOS" se reemplacen tambien la imagen en las areas "uno" y "tres".




Yo lo había conseguido pero sin ese sombreo (ponganle) en "uno" y "tres", simplemente cambiaba la imagen y chau


hay forma de hacer esto que busco en css? es medio complejo no? :\

Muchas gracias ^^

Por maticjs

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 May 2009 08:21 pm
alguna novedad con esto? les agradeceria una ayuda al menos a pensarlo :)

en si no se bien si esto se podra hacer en css o tendre que recurrir a javascript :\ espero que no

Por maticjs

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 May 2009 10:35 pm
no entiendo , por que tu menú es del uno al cuatro 3 veces? no tiene sentido ó son 3 menus diferentes?. Muestra la dirección o envía el xhtml del menú y explícalo de otra manera.

Por chug0

Claber

136 de clabLevel



 

Perú

mozilla
Citar            
MensajeEscrito el 18 May 2009 10:39 pm
jajaja

si, es medio confuso y un poco caprichoso lo mio
ppero el tema es asi

ves que pusedos imagenes? la segunda vendria a ser el menu ya armado
entendes porque puse las 3 partes que me decis?

es decir cuando yo selecciono un item, el item de arriba quiero que cambie de imagen al igual que el de abajo, y obivamente tmb quiero que cambie el que seleccioné

Basicamente mi pregunta es esta:

Se puede hacer que al poner el mouse sobre algun recuadro, en vez de cambiarse esa imagen de ese recuadro, se cambie la imagen de OTRO recuadro?

ahi se entendio mas? :D

Por maticjs

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 May 2009 01:10 am
suponiendo que tu primera imagen es un sprite y el segundo es el menu, seria algo asi:

Estructura XHTML

Código HTML :

<!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" xml:lang="es" lang="es">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>Menu Css Clab</title>
      <link href="clab-css.css" rel="stylesheet" type="text/css"/>
   </head>
   <body>
      <div class="menu-div">
         <ul class="menu">
            <li><a href="menu1">menu1</a></li>
            <li><a href="menu2">menu2</a></li>
            <li><a href="menu3">menu3</a></li>
            <li><a href="menu4">menu4</a></li>
            <li><a href="menu5">menu5</a></li>   
            <li><a href="menu6">menu6</a></li>
         </ul>
      </div>
   </body>
</html>

CSS

Código Javascript :

/*mini reset*/
*  {
   margin: 0; 
   padding: 0;
   text-decoration:none;
   list-style-type:none;
}
/*end mini reset*/
.menu-div {
   margin:20px 50px;
   width:100px;
}
.menu-div:hover a{/*the magic: cuando hacer hover al div todos los fondos del elemento a cambian*/
   background:url(clab-menu.jpg) 0% 68% /*2:#menu-div hover color todo fondo azul*/
}
.menu {
   width:100px;
   padding-top:20px;
}
.menu li {
   position:relative;
   height:34px;
}
.menu a {
   display:block;
   color:#fff;
   line-height:34px;
   background:url(clab-menu.jpg) 0% 34%;/*1:color por defecto rojito*/
   padding-left:5px;
} 
.menu-div a:hover {
   background:url(clab-menu.jpg) 0% 0%;/*3:.menu li hover color amarillo*/
}
.menu-div a:active, .menu-div a:focus{
   background:url(clab-menu.jpg) 0% 102%;/*4:.menu li hover color verde*/
}

y

Imagen Sprite



ejemplo funcionando aqui
saludos

Por chug0

Claber

136 de clabLevel



 

Perú

mozilla

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.