domingo, 7 de septiembre de 2014

Menú horizontal con cambio de color, con CSS

 Este es un menú que hace tiempo intentaba conseguir sólo usando CSS.

El siguiente es el código:

<html>
  <head>
    <style type="text/css">
      #menu li {
        display: inline;
      }
      #menu li a {
        font-family: Arial;
        font-size:12px;
        text-decoration: none;
        float:left;
        padding: 10px;
        background-color: #5FBF71;
        color: gold;
        border-width: 2px;
        border-color: #204026;
        border-style: solid;
        border-right-style: none;
      }
      #menu li.fin a {
        border-width: 2px;
        border-color: #204026;
        border-right-style: solid;
      }
      #menu li a:hover {
        background-color: #3F7F4C;
      }
 </style>
  </head>
  <body>
    <br />
      <ul id="menu">
        <li><a href="#">Enlace 1</a></li>
        <li><a href="#">Enlace 2</a></li>
        <li class="fin"><a href="#">Enlace 3</a></li>
      </ul>
    <br />
  </body>
</html>

Y este es el resultado







miércoles, 3 de septiembre de 2014

Menú vertical que cambia al pasar el mouse, con CSS

 El siguiente es un ejemplo que encontré en internet (con algunas modificaciones propias), que muestra un menú con celdas verticales que cambian de color, tanto del font como del fondo, cuando pasamos el mouse sobre ellas.

 El siguiente es el código:


<html>
  <head>
    <style type="text/css"> 
      .menucolor{
        margin:2 0 2 0px;
        padding: 5px;
        border: 1px solid #204026;
        font-weight: bold;
        background-color: #BF915F;
      }
      .menucolor A{
        color: #666666;
        text-decoration: none;
        display: block;
      }
      .menucolor A:hover{
        background-color: #3F7F4C;
        color: #ffffcc;
      } 
    </style>
  </head>
  <body>
    <div class=navenlace><a href="#">enlace 1</a></div>  
    <div class=navenlace><a href="#">enlace 2</a></div>
    <div class=navenlace><a href="#">enlace 3</a></div>
  </body>
</html>


 Y este el resultado: