Campo de Búsqueda ajustable en la Barra de Navegación

Un campo de búsqueda siempre es útil ya que permite al lector encontrar el articulo que busca sin la tediosa necesidad de tener que hurgar en el historial, si es que el sitio dispone de el, o interminables listas de títulos. Colocar uno en nuestro site sin duda sera muy agradecido por los lectores.


Pero cuando pensamos en colocar uno nos genera la incógnita de que aspecto debe tener, ¿Cómo lo queremos?, ¿Donde lo queremos? e interrogantes de ese tipo, pues aquí un sencillo ejemplo que podría sernos útil al momento de diseñar e implementar nuestro campo de búsqueda.

Lo primero que haremos sera definir ciertas propiedades de código CSS, la primera que haremos sera la que define la apariencia de la barra de navegación:

#menu {
   width: 1000px;
   height: 50px;
   margin:10px auto;
   background:#d1d1d1 url(RUTA DEGRADADO DE FONDO) repeat-x;
   padding:0;
   border-radius: 10px;
   box-shadow: 0px 2px 2px #333 inset, 0px -2px 2px #ccc inset;
}

Ahora para lograr que las celdas que contienes los enlaces se ajusten al activar el campo de búsqueda, usaremos una tabla, asi que ahora definimos la apariencia de estas celdas, osea las columnas de la tabla.

#menu .celda {
   background: url(RUTA DEL SEPARADOR) center right no-repeat;
   text-align:center;
}

Ahora definimos unas propiedades de :hover, que no es mas que la apariencia que toma cuando se coloca el cursor encima, y también la apariencia del enlace:

#menu .celda a {
   display:block;
   color:#000000;
   padding:16px 0;
   text-decoration:none;
   letter-spacing:1px;
   text-transform:uppercase;
   font-weight:bold;
}

#menu .celda a:hover { color:#fff }

#menu .celda:hover {
   background:url(IMAGEN AL COLOCAR EL CURSO ENCIMA) center bottom no-repeat, url(RUTA DEL SEPARADOR) center right no-repeat;}

Este seria todo el código necesario para la apariencia de la barra de navegación, ahora lo que en realidad nos compete, el campo de búsqueda, para este definimos las siguientes propiedades:

#input {
   color:#333333;
   padding:5px;
   background:#e2e2e2 url(IMAGEN DE FONDO) center right no-repeat;
   width:160px;
   border-radius:5px;
   border:solid 1px #999999;
   float:right;
   margin: 0px 15px;
   -moz-transition: all 0.5s ease-out;
   -webkit-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}

#input:hover {
   background:#fff url(images/search.png) center right no-repeat;}

#input:focus {
   background:#FFFFFF url(images/search.png) center right no-repeat;
   width:220px;
   border-color: #666666;
   outline:none;}

La propiedad transition que he definido el la etiqueta #input hará que el cambio no sea drástico sino que un poco suavizada.
OK, este ya seria todo el código CSS necesario, ahora procedamos al código HTML, este seria algo como esto:

<table width="1000" border="0" cellpadding="0" cellspacing="0" id="menu">
  <tr>
     <td width="16%" class="celda"><a href="#">home</a></td>
     <td width="16%" class="celda"><a href="#">about</a></td>
     <td width="16%" class="celda"><a href="#">gallery</a></td>
     <td width="16%" class="celda"><a href="#">contact</a></td>
     <td width="16%" class="celda"><a href="#">support</a></td>
     <td width="20%"><form action="#" method="post">
       <input type="text" id="input"  onfocus="if (this.value == 'Search my site...') {this.value = '';}" onblur="if (this.value == '') {this.value ='Search my site...';}" value="Search my site..." />
  </form></td>
  </tr>
</table>

Este yo lo he escrito para generar una barra de navegación con un ancho de 1000px, centrada y 5 enlaces y el campo de búsqueda, pueden ir experimentando cambiando la cantidad de enlaces variando el ancho, la posición y lo que quieran.

Aquí pueden ver una visualización del resultado final.
Enlace : Barra de navegación con campo de búsqueda ajustable