Campo de búsqueda "responsive" con transiciones CSS

Campo de búsqueda "responsive" con transiciones CSS

El desarrollo de una barra de navegación responsive estándar con Bootstrap es sencillo. La cosa se complica en dispositivos móviles pequeños cuando queremos incluir varias funcionalidades diferentes y que siempre estén presentes. Para la web efisioterapia.net que funciona sobre Drupal 7, además de solucionar el reto de tener un campo de búsqueda siempre presente, que no ocupase demasiado espacio en cualquier dispositivo (sobre todo en vertical para evitar aumentar el scroll de la cabecera), teníamos el objetivo de hacerlo lo más ligero en cuanto a carga, por lo que optamos por no usar Javascript y sustituirlo por transiciones CSS.

El HTML en drupal

Tomamos de partida el ejemplo Expandable Search Form with CSS3. En la demo consigue mediante transiciones que al poner el foco en el campo de búsqueda este se despliegue de izquierda a derecha de manera suave.

En nuestro caso, el código del formulario nos lo da Drupal. Resumido y limpio de alguna etiqueta sobrante el código que genera el bloque sería así:

<form class="form-search content-search navbar-form" action="" method="post">
    <div class="input-group">
        <input placeholder="Buscar" class="form-control form-text" type="text" size="15" maxlength="128" />
        <span class="input-group-btn">
            <button type="submit" class="btn btn-primary"><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></button>
        </span>
    </div>
</form>

El CSS para móviles

En este caso hicimos que el campo de búsqueda creciera de derecha a izquierda, ya que el formulario se sitúa a la derecha de la barra de navegación.

/* Adaptamos las reglas al código que genera drupal y definimos los estilos generales */

/* Lo primero es posicionar el formulario para asegurarnos que el efecto se produce de derecha a izquierda */
.navbar-form {
    position:absolute;
    right:0px;
    top:0px;
}

/* Definimos las transiciones */
.navbar-form .form-control[type=text] {
    background: transparent;
    display:inline-block;
    transition: all .5s;
}
/* Al situar el puntero en el campo de búsqueda este cambia su color de fondo a blanco, el color de la letra, el borde y la sombra */
.navbar-form .form-control[type=text]:focus {
    background-color: #fff;
    border-color: #729fcf;
    color:#333;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* Para pantallas grandes hacemos que el formulario se despliegue con amplitud ya que disponemos de espacio en la barra de navegación, la busqueda se ejecuta con intro o pinchando en el icono de la lupa */
@media (min-width:1200px) {
    .navbar-form input.form-control[type=text] { width: 160px; }
    .navbar-form input.form-control[type=text]:focus { width: 350px; }
}

/* Para pantallas menores reducimos el campo de busqueda y hacemos que se despliegue cuando hacemos focus sobre el icono de la lupa. La busqueda se ejecuta con intro o pinchando de nuevo en el icono de la lupa */
@media (max-width: 1200px) {
    .navbar-form .form-control[type=text] {
        width:40px;
        position:absolute;
        right:0px;
        z-index:1000;
        padding:8px 12px;
        cursor:pointer;
    }
    .navbar-form,
    .navbar-form div.input-group {
        width:40px;
        height:40px;
    }
    .navbar-form .form-control[type=text]:focus {
        position:absolute;
        right:40px;
        width:250px;
    }
}

/* Para pantallas de smartphones ajustamos el ancho del campo de busqueda */
@media (max-width: 375px) {
    .navbar-form .form-control[type=text]:focus {
        width:150px;
    }
}

Ejemplos

Demo 1: Input desplegable

Demo 2: Input desplegable que oculta el botón. Cuando el espacio es muy reducido en la barra de navegación (Ej: Smartphones)

<div class="demo">
  <form class="form-search">
    <div class="input-group">
      <input class="form-control form-text" maxlength="128" placeholder="Buscar" size="15" type="text" />
      <span class="input-group-btn"><button class="btn btn-primary"><i class="fa fa-search fa-lg">&nbsp;</i></button></span>
    </div>
  </form>
</div>
.demo, .demo-2 {
    position:relative;
    height:100px;
    width:500px;
}
.demo .form-search, .demo-2 .form-search {
    position:absolute;
    right:0px;
    top:0px;
}
.demo .form-search input[type=text],
.demo-2 .form-search input[type=text] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
    border: solid 1px #ccc;
    padding: 9px 18px;
    width: 200px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.demo-2 .form-search input[type=text] {
    width:60px;
    position:absolute;
    right:0px;
    z-index:1000;
    padding:8px 12px;
    cursor:pointer;
}
.demo-2 .form-search div.input-group {
    width:60px;
}
.demo .form-search input[type=text]:focus {
    width: 350px;
    background-color: #fff;
}
.demo-2 .form-search input[type=text]:focus {
    position:absolute;
    right:60px;
    width:250px;
}
.demo .form-search button.btn,
.demo-2 .form-search button.btn {
    padding:16px 12px;
    border-top-right-radius:4px;
    border-bottom-right-radius: 4px;
    cursor:not-allowed;
}
.demo-2 .form-search button.btn {
  padding:15px 12px;
}

Si quieres ver el resultado en el entorno real visita efisioterapia.net desde el móvil o juega con el temaño de ventana de tu navegador.



Historias relacionadas

Respuestas JSON con Timber

Respuestas JSON con Timber

Nuestro enfoque es construir sitios web rápidos y fácilmente mantenibles y actualizables a medio/largo plazo gracias a un reducido número de dependencias.

A pesar de que nuestra plataforma de preferencia es Python/Django, los tiempos cambian y las modas se imponen. Atrás quedaron el PHP-Nuke, Post-Nuke, Xoops, Mambo, Spip, Joomla. Ahora Wordpress está en ...

Mapas interactivos sin usar Google Maps

Mapas interactivos sin usar Google Maps

Leaflet es una librería JavasScript de código abierto para embeber mapas. Es una librería perfecta para sustituir a Google Maps en los sitios en que queremos incluir un mapa de situación de nuestro negocio o una serie de marcadores con direcciones de interés.

Recientemente, hemos utilizado esta librería en el proyecto Podorunners, en el que ...

Solicítanos información

 Tel: (+34) 983 070 900