• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo crear una barra de búsqueda expandible y responsive

barra de busqueda expandible

Muchas páginas web requieren de una barra de búsqueda para que el usuario encuentre más rápido aquello que está buscando. Estas barras suelen estar más en sitios web de gran envergadura o en un blog.

El objetivo de este tutorial es personalizar una barra de búsqueda que sea elegante, expandible y que sea responsive, que se adapte a los dipositivos móviles que hay hoy en día.

Inicialmente, sólo queremos mostrar un botón con un icono de búsqueda y al hacer clic en él, se muestre una barra de búsqueda que se deslice o se expanda hacia afuera. Cuando se escriba algo en la barra, buscará al hacer clic en el icono o pulsando Enter en el teclado. La barra de búsqueda se cerrará si hacemos de nuevo clic en el icono con la barra vacía o en cualquier parte de la página web.

Todo ello lo lograremos con un poco de CSS y JavaScript. Recordar que este tutorial es sólo para personalizar una barra de búsqueda, para que encuentre búsquedas hay que programarlo y crear una base de datos. Como podéis observar, en nuestra web, tenemos esta barra funcionando y ya expandida desde un inicio. A continuación podéis ver un ejemplo, sin funcionar las búsquedas, de como va a quedar la barra de búsqueda personalizada. Podéis probarla:

BARRA DE BÚSQUEDA EXPANDIBLE

Para empezar descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos cuatro carpetas. Abrimos la carpeta js que contiene tres archivos. Copiamos y pegamos los archivos classie.js y uisearch.js a nuestra carpeta js y hacemos un enlace a este archivo al final de la página donde vayamos a poner la barra de búsqueda justo antes de </body> más un script para hacerlo funcionar. El archivo modernizr.custom.js sólo lo pondremos si no utilizamos esta librería o si tenemos una versión inferior de modernizr a este ya puesto en la página y entonces habría que sustituirlo. Este último archivo va enlazado dentro de la etiqueta <head>. A continuación un ejemplo de cómo ponerlo. Tener en cuenta que la ruta puede cambiar dependiendo de donde tengáis localizados los archivos.

los dos archivos antes de la etiqueta de cierre </body> más el script para que funcione

<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>

y si hace falta, dentro de la etiqueta <head>

<script src="js/modernizr.custom.js"></script>

Ahora abrimos la carpeta que dice fonts, copiamos todas las fuentes icomoon que hay y las pegamos dentro de nuestra carpeta de fuentes de nuestra web. Os dejo un enlace a la web de Icomoon.

Seguidamente abrimos la carpeta que dice css, copiamos todo lo que hay dentro del archivo uisearch.css y lo pegamos dentro del archivo principal css de nuestra web o simplemente copiamos y pegamos este archivo dentro de la carpeta css de nuestra web. Luego hay que indicar en la página donde ponemos la barra de búsqueda expandible un enlace a este archivo en la parte de arriba dentro de la etiqueta <head>. Un ejemplo.

<link rel="stylesheet" href="css/nombre-archivo-principal.css">

o

<link rel="stylesheet" href="css/uisearch.css">

Para mostrar el icono y la barra de búsqueda expandible, tenemos que poner un código en el lugar donde queramos que se muestre. El código es un div con las clases del buscador que engloba un formulario dentro. Pongo el código a continuación, también lo tenéis en los archivos descargados dentro de la carpeta demo.

<div id="sb-search" class="sb-search">
  <form>
    <input class="sb-search-input" placeholder="Barra de búsqueda expandible..." type="text" name="search">
    <input class="sb-search-submit" type="submit">
      <span class="sb-icon-search"></span>
  </form>
</div>

Una vez tengáis todos los archivos subidos al servidor, siguiendo estos pasos, ya lo tendréis personalizado.

Lo que vamos a explicar ahora, es el código de esos archivos que hemos copiado y pegado, para que entendamos un poco mejor el funcionamiento de esta barra de búsqueda.

MARCADO HTML

Como hemos visto en el último código, el div actua como recipiente principal que engloba el formulario, el texto y el icono entre otras cosas. En nuestro blog, hemos puesto que la barra de búsqueda quede expandida desde un inicio ya, para hacer esto, hay que cambiar la clase del div de la siguiente forma.

<div id="sb-search" class="sb-search"> cambiarlo a <div id="sb-search" class="sb-search sb-search-open">

Podéis inspeccionar el código que hemos puesto en nuestro buscador para que os hagáis una idea para hacerlo funcionar. Hemos puesto en el form el method por get y un action hacia donde tiene que dirigirse el formulario. Luego hay que hacer un juego de registros en la página que muestra los resultados conectado a una base de datos donde se almacena aquello que queremos mostrar mediante el buscador. Parece complicado pero no lo es tanto, si necesitáis un tutorial sobre esto, sólo tenéis que decirmelo.

CSS

Lo primero que está puesto en el css son los enlaces hacia la fuente icomoon para que se muestre nuestro icono. Lo que hacemos con el siguiente código, es asegurarnos de que tenemos un botón con un icono de búsqueda visible y el resto ocultado. También lo que sucede cuando ampliamos la barra de búsqueda, la envoltura principal, a la que añadiremos una transición.

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.sb-search {
	position: relative;
	margin-top: 10px;
	width: 0%;
	min-width: 60px;
	height: 60px;
	float: right;
	overflow: hidden;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
	-webkit-backface-visibility: hidden;
}

En los siguientes códigos nos aseguramos que el texto quede centrado, a una altura correcta, tamaño de la fuente, etc. Si queréis cambiar el tamaño habrá que cambiar la altura y anchura en varias partes del css y el padding de aquí, podéis inspeccionar el código de nuestro buscador para ver como lo hicimos. También vamos a eliminar los estilos por defecto del botón de búsqueda para los navegadores WebKit. Si no queréis los bordes redondeados eliminar todos los border-radius o dejarlos a 0px.

.sb-search-input {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	outline: none;
	background: #05354e;
	width: 100%;
	height: 60px;
	margin: 0;
	z-index: 10;
	padding: 20px 65px 20px 20px;
	font-family: 'Lato';
	font-size: 17px;
	color: #fff;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

input[type="search"].sb-search-input {
	-webkit-appearance: none;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

Los siguientes códigos es para personalizar el texto de la caja de búsqueda, donde dice placeholder. El resto del código es para personalizar el icono, colores, posición, tamaño, etc. y la anchura y colores de la barra de búsqueda cuando está abierta. No pongo el resto del código pues lo tenéis ya en los archivos que habéis descargado. Lo podéis personalizar todo a vuestro gusto.

JAVASCRIPT

Los dos archivos de JavaScript que hemos puesto en nuestra carpeta js son lo que hacen funcionar esta barra de búsqueda, el efecto expandible, la compatibilidad con otros navegadores y con todo tipo de dispositivos móviles. Observar el código puesto con detenimiento.

No es complicado de personalizar y el resultado de esta barra de búsqueda es bastante elegante. Seguro que os puede quedar genial en algún lugar de vuestro sitio web.

A continuación os dejo el enlace de descarga con todos los archivos. Espero que os haya gustado el tutorial, para cualquier cosa podéis comentar.

ENLACE DE DESCARGA
Barra de búsqueda expandible y responsive (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (2)

  • foto
    Israel Responder

    Muy bueno. Lo pienso poner en práctica. Muchas gracias.

    04 de Mayo 2016 a las 11:20h
    • foto blog
      Paco (Iborra Web Design) Responder

      Hola Israel,

      Gracias a ti por comentar, me alegro que te guste. Es sencillo de poner, cualquier duda me dices.

      Un saludo.

      04 de Mayo 2016 a las 11:59h

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code