Zaloguj | Zarejestruj | FAQ
Anonymous

Me pueden ayudar con este Menu de Colores

+ Odpowiedz

Posty: 2 Strona 1 z 1


Me pueden ayudar con este Menu de Colores

przez poncho_gc » Wt lip 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.

Załączniki

  1. menu color.rar (2.73 KiB) Pobrane 1055 razy

Avatar użytkownika

poncho_gc

  • Posty: 1
  • Dołączył(a): Wt lip 23, 2013 9:04 pm

Re: Me pueden ayudar con este Menu de Colores

przez XainPro » Cz lip 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
Kod: Zaznacz cały
<!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
Kod: Zaznacz cały
  .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 użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1