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"> </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.
