SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: crs94 en Viernes 24 de Junio de 2011, 04:42

Título: Aplicar estilo css a un menu
Publicado por: crs94 en Viernes 24 de Junio de 2011, 04:42

Hola a todos la verdad soy un novato asi que les pido de su ayuda miren lo que pasa
este es mi codigo <style type="text/css">
li {
  border-style: solid;
  border-color: #f0d7b5;
  border-width: 2px 1px 0;
  margin: 0 2px;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 90px;
  text-align: center;
  background-color: #aa876f;
}
   </style>
<ul style="
  margin: 0 40px 0 0;
  padding: 0;
  font-size: 105%;
  list-style-type: none;
  float: right;">
<li>Menu</li>
<li>Home</li>
<li>Contaction</li>
</ul>



AHora digamos que tengo un estilo el que sea inventenselo ustedes pero lo que quiero es saber como hacer que con el onmouse over se aplique este estilo por favor ayudenme y si pueden expliquenme cada parte del codigo que si me interesa aprender como le aria?

Título: Re: Aplicar estilo css a un menu
Publicado por: F_Tanori en Viernes 24 de Junio de 2011, 13:52

Cita de: "crs94"

Hola a todos la verdad soy un novato asi que les pido de su ayuda miren lo que pasa
este es mi codigo <style type="text/css">
li {
  border-style: solid;
  border-color: #f0d7b5;
  border-width: 2px 1px 0;
  margin: 0 2px;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 90px;
  text-align: center;
  background-color: #aa876f;
}
   </style>
<ul style="
  margin: 0 40px 0 0;
  padding: 0;
  font-size: 105%;
  list-style-type: none;
  float: right;">
<li>Menu</li>
<li>Home</li>
<li>Contaction</li>
</ul>



AHora digamos que tengo un estilo el que sea inventenselo ustedes pero lo que quiero es saber como hacer que con el onmouse over se aplique este estilo por favor ayudenme y si pueden expliquenme cada parte del codigo que si me interesa aprender como le aria?

Mira en estas paginas, puedes descargar muchos ejemplos, es cuestion de analizar el codigo:

viewtopic.php?t=5710 (http://foros.solocodigo.com/viewtopic.php?t=5710" onclick="window.open(this.href);return false;)
http://cssmenumaker.com/horizontal_css_menu.php (http://cssmenumaker.com/horizontal_css_menu.php" onclick="window.open(this.href);return false;)

Lo que necesitas primero es leer algun curso/manual.

Saludos

Título: Re: Aplicar estilo css a un menu
Publicado por: fonsi3 en Lunes 27 de Junio de 2011, 18:25

Debes aplicar la pseudo-class "hover", que se activa cuando se hace "mouseover" sobre un elemento HTML, de esta manera por ejemplo

Código: CSS

1. li:hover {
2.     color: #ff0063
3.     background: #22ff22
4. }
5.  

Aqui tienes mas informacion: http://www.w3.org/TR/CSS2/selector.html (http://www.w3.org/TR/CSS2/selector.html" onclick="window.open(this.href);return false;)