Baúl de Recursos: septiembre 2014

domingo, 7 de septiembre de 2014

CSS: Menú horizontal con cambio de color

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

CSS: Menú vertical que cambia al pasar el mouse

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>