Menu desplegable de colores

ponchogyg · #1 (**permalink**) 20/07/2013, 23:10

Hola a todos los miembros de este for.
es mi primera vez que entro a este foro, quisiera ver la manera de que me pudieran ayudar con este menu. no encuentro ningun cript en la red. o quisas no he buscado en el lugar correcto.
Aqui les doy el link del menu:
[URL="http://electricalsupport.com.mx/es/"]http://electricalsupport.com.mx/es/[/URL]

es pero que alguien tenga un script o archivo que me pudiera ayudar.
se los agradeceria infinitamente.
De ante mano muchas gracias...

Saludos....

delfoznet · #2 (**permalink**) 21/07/2013, 01:47

Lo que preguntas es muy simple de hacer mediante FLASH... pero, personalmente, no usaría flash... lo haría un poco menos dinámico pero con colores HTML con CSS3

Por que no flash..por que los buscadores no lo leen ni se vería en un iphone...

si te sirve te explico como.. pero que prefieres.. HTML+CSS o Flash?

ponchogyg · #3 (**permalink**) 21/07/2013, 07:59

Gracias Delfoznet, por tu pronta respeusta.
claro que si me agradaria que me lo explicaras en html +css. soy novato en esto de pero con muchas ganas de aprender.
tu dime la manera de contactarnos o si espor este medio con gusto....

lo lamentable de mi situacion es ke llegue tarde a este foro. el archivo demo lo tengo que presentar para mañana lunes al medio dia.

Estare conectado.. todo el dia.
Saludos
Poncho

ArturoGallegos · #4 (**permalink**) 21/07/2013, 14:47

Hola poncho, bienvenido al foro... en el foro no se da ayuda personalizada ni de forma privada, toda ayuda debe ser publica para que sirva a mas usuarios.

en tu caso no tiene mucha ciencia lo de aplicar colores a cada item, puedes usar una clase en cada elemento o bien puedes usar nth-child
http://www.w3schools.com/cssref/sel_nth-child.asp

para mas ayuda, favor de intentar realizar algo por tu cuenta y regresa con el código que has probado, de esa forma tendremos una base para ayudarte....

-------------------- esto va porque has mencionado fecha limite de entrega -----------------

aquí por lo regular no se comparte código ya realizado, siempre apoyamos a resolver dudas y ayudarte a aprender por lo que cuando necesites ayuda con código, tendrás que hacer algo por tu cuenta para demostrar lo has intentado y en base a ese código te apoyaremos.

este proceso puede ser lento en algunas ocasiones, por lo que si se requiere de manera urgente recomendamos pasar a la sección de empleo y contrates a alguien para el trabajo.

ponchogyg · #5 (**permalink**) 22/07/2013, 00:17

segui tu sugerencia y aqui esta lo ke yo he echo,ke no es mucho no es lo que busco, perocomo dije en el post anterior soy nuevo.
este es el link que pretendo hacer:
[URL="http://electricalsupport.com.mx/es/"]http://electricalsupport.com.mx/es/[/URL]

y este es mi codigo que nada que ver con el del link, por esa razon pedi ayuda.

CSS

Código CSS:

Ver original#tabsI {
   float:left;
    width:100%; 
    
    background:#EFF4FA;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #DD740B;
    }
    #tabsI ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    #tabsI li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabsI a {
    float:left;
    background:url("tableftI.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 5px;
    text-decoration:none;
    }
    #tabsI a span {
    float:left;
    display:block;
    background:url("tabrightI.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }
    
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
    color:#FFF;
    }
    #tabsI a:hover {
    background-position:0% -42px;
    }
    #tabsI a:hover span {
    background-position:100% -42px;
    }

html

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="../imagenes/favicon.ico" />
<title>Junyka Electric... Mas Que un Proveedor  Su Asesor de Confianza</title>
<link rel="stylesheet" href="color.css" type="text/css" media="screen">
</head>
 
<body>
<div id="tabsI">
    <ul>
    <li><a href="#" title="Link 1"><span>Nosotros</span></a></li>
    <li><a href="#" title="Link 2"><span>Quienes Somos</span></a></li>
    <li><a href="#" title="Link 3"><span>Fabricacion</span></a></li>
    <li><a href="#" title="Link 4"><span>Productos</span></a></li>
    <li><a href="#" title="Link 5"><span>Clientes</span></a></li>
    <li><a href="#" title="Link 6"><span>Catalogo</span></a></li>
    <li><a href="#" title="Link 7"><span>Contactanos</span></a></li>
    </ul>
    </div>
</body>
</html>

como no se como haser el efecto del cambio de color se le integro 2 imagenes .gif para haser el cambio de color, pero no es el resultado esperado.

por esa razon les pedia su ayuda o si alguien tubiera un script, para basarme.

Saludos.

ArturoGallegos · #6 (**permalink**) 22/07/2013, 02:54

vale con el código mostrado ya no me ha quedado del todo claro que deseas.... tu problema es como colocar color de fondo similar al de los botones del link que muestras

ooooooo lo que buscas es colocar un diferente color a cada elemento del menú como en el link mostrado?

si es el primer caso, esta bien así como lo tienes con gif aunque yo preferiría png con transparencias, si es lo segundo.... no veo que hayas implementado lo que te comente anteriormente de agregar una clase a cada elemento o usar nth-child

ponchogyg · #7 (**permalink**) 22/07/2013, 08:47

Buen dia arturo. asi es lo ke pretendo hacer es el cambiar de color a cada menu al pasar el mouse y darle animacion como en el link que puese.
y en efecto no pude poner las clases que me comentastes,por una razon.

no lo se hacer, para que te voy a echar mentiras ablando con la verdad.

mira conocimientos de html y algo de php si los tengo.pero esto de .CSS estoy apenas aprendiendo por videos queme encontre en la red. y pienso que todavia estoy completamente en "0". pero a ya ponerle animacion al menu y que cambie de colores lo considero fuera de mi alcance,
por esa razon les pido ayuda.

por que yo se que cualquiera de este foro alguna ves fue principiante y novato como yo y mas a mis 47 años jejeje el mas viejo del foro creo yo. querioendose actualizar...

Saludos a todo el foro......

ArturoGallegos · #8 (**permalink**) 22/07/2013, 12:12

para la animación puedes usar CSS la propiedad transition, o bien en jquery investiga slideup(), slidedown(), hide(), animation() .... alguna de esas te ha de servir.

si solo es un color de fondo para todos los elementos como lo tienes esta bien, si es un color distinto a cada elemento usas nth-child, en tu caso seria algo como

Código CSS:

Ver originalli:nth-child(2){background:red;}

ponchogyg · #9 (**permalink**) 01/08/2013, 10:29

Buenos dias a todos.
les pido mil disuclpa si ya no postie resultados, pero es que sufri un accidente, me fisure el nervio sitico de manera horizontal. es demaciado doloroso,pero con l aterapia de tokes y calor ahi la llevo.

en lo relacion del menu de colores no lo pude hacer