Identificarse | Registrarse | FAQ
Anonymous

Me pueden ayudar con este Menu de Colores

+ Publicar una respuesta

2 mensajes Página 1 de 1


Me pueden ayudar con este Menu de Colores

por poncho_gc » Mar Jul 23, 2013 9:20 pm

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 script en la red. o quisas no he buscado en el lugar correcto.
Aqui les doy el link del menu:
http://electricalsupport.com.mx/es/

les anexo todos los archivos y coodigo que hise pero no me dio lo esperado.



no puede hacer que cambiara de color cada menu, pudieran ayudarme por favor.

Saludos.

Adjuntos

  1. menu color.rar (2.73 KiB) 1041 veces

Avatar de Usuario

poncho_gc

  • Mensajes: 1
  • Registrado: Mar Jul 23, 2013 9:04 pm

Re: Me pueden ayudar con este Menu de Colores

por XainPro » Jue Jul 25, 2013 10:22 am

los menús que nos ha facilitado la relación de se construyen en flash.
no en html / css
pero todavía se puede desarrollar menús de este tipo en HTML css aquí está un pequeño ejemplo

HTML
Código: Seleccionar todo
<!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" class="link1"><span>Nosotros</span></a></li>
    <li><a href="#" title="Link 2" class="link2"><span>Quienes Somos</span></a></li>
    <li><a href="#" title="Link 3" class="link3"><span>Fabricacion</span></a></li>
    <li><a href="#" title="Longer Link Text" class="link4"><span>Productos</span></a></li>
    <li><a href="#" title="Link 5" class="link5"><span>Clientes</span></a></li>
    <li><a href="#" title="Link 6" class="link6"><span>Catalogo</span></a></li>
    <li><a href="#" title="Link 7"class="link7" ><span>Contactanos</span></a></li>
    </ul>
    </div>
</body>
</html>


CSS
Código: Seleccionar todo
  .link1 {
   background-color:#00F;
  }
  .link1:hover {
   background-color:#09F;
  }
    .link2 {
   background-color:#900;
  }
   .link2:hover {
   background-color:#960;
  }
 
   .link3 {
   background-color:#9F3;
  }
     .link4 {
   background-color:#F30;
  }
    #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;
    margin:0;
    padding:0 0 0 5px;
    text-decoration:none;
    }
    #tabsI a span {
    float:left;
    display:block;
    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;
    }

Avatar de Usuario

XainPro

  • Mensajes: 3933
  • Registrado: Vie Feb 17, 2012 8:10 pm


+ Publicar una respuesta

Página 1 de 1