Blog
Crear un sticky desplegable en la web
En ciertas ocasiones es interesante crear un sticky desplegable en la web que tengamos fijo en alguna parte de la pantalla al que el usuario pueda acceder en cualquier momento a la información, ya sea un formulario, una lista de enlaces, un chat…
Como siempre y para que sea lo más entendible posible voy a separar el código en partes y luego lo veremos todo junto para que se pueda ejecutar directamente. Aun así recomiendo que tanto el javascript como el css estén en archivos separados… bueno vamos a ello…
Lo primero es crear nuestra estructura html donde tenemos que llamar jQuery y en mi caso de forma adicional a font awesome… pero esto último no es necesario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ocultar mostrar</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/4f8772f055.js"></script>
</head>
<body>
<div id="contactFormContainer">
<div id="contactForm">
<a href="#" id="closeLink"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</a>
<div class="clearfix"></div>
<div class="spacer-mini"></div>
Lo que queramos!
</div>
<div id="contactLink">¿EN QUÉ PODEMOS AYUDARTE? <i class="fa fa-envelope-o" aria-hidden="true"></i></div>
</div>
</body>
</html>
Como vemos lo único destacable, aparte de conectar por cdn a jQuery es que tenemos un contenedor que se divide en dos cajas… en nuestro caso llamadas contactForm y contactLink, (estos nombres son debidos a que yo suelo usar este componente para tener formulario de contacto). Ahora vamos a introducir nuestro código css:
#contactFormContainer {
position: fixed;
left: 40px;
bottom: 0;
z-index: 999999;
}
#contactLink {
width: 350px;
padding: 5px 20px;
text-align: center;
font-weight: bolder;
display: block;
cursor: pointer;
background-color: #e5322c;
color: #fff;
}
#contactForm {
width: 350px;
display: none;
background-color: #e7e7e7;
color: #444;
padding: 20px;
line-height: 100%;
border: 1px solid #fff;
}
.spacer-mini {
clear: both;
display: block;
height: 20px;
}
Con solo estas líneas de código podemos ir dándole ya forma y posición a nuestro sticky. De hecho en este caso lo estamos colocando abajo a la izquierda para tenerlo accesible ahí permanentemente. Como se ve es un código bastante sencillo que oculta toda la parte del contenido y deja solo la parte de la llamada a la vista, pero aun no tiene funcionalidad ninguna, esta se la vamos a introducir por medio del siguiente código jQuery que no hace otra cosa que modificar el estado del display de nuestra caja de contenido por medio de una pequeña animación.
$(document).ready(function(){
$("#contactLink").click(function () {
$('#contactForm').toggle("slow");
});
$("#closeLink").click(function () {
$('#contactForm').toggle("slow");
});
});
Con esto ya podemos tener nuestro sticky listo y ahora las posibilidades abrirlo, cerrarlo, el que mostrar… son enormes y como se puede ver en el código completo, no es nada complicado…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ocultar mostrar</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/4f8772f055.js"></script>
<style>
#contactFormContainer {
position: fixed;
left: 40px;
bottom: 0;
z-index: 999999;
}
#contactLink {
width: 350px;
padding: 5px 20px;
text-align: center;
font-weight: bolder;
display: block;
cursor: pointer;
background-color: #e5322c;
color: #fff;
}
#contactForm {
width: 350px;
display: none;
background-color: #e7e7e7;
color: #444;
padding: 20px;
line-height: 100%;
border: 1px solid #fff;
}
.spacer-mini {
clear: both;
display: block;
height: 20px;
}
</style>
</head>
<body>
<div id="contactFormContainer">
<div id="contactForm">
<a href="#" id="closeLink"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</a>
<div class="clearfix"></div>
<div class="spacer-mini"></div>
Lo que queramos!
</div>
<div id="contactLink">¿EN QUÉ PODEMOS AYUDARTE? <i class="fa fa-envelope-o" aria-hidden="true"></i></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#contactLink").click(function () {
$('#contactForm').toggle("slow");
});
$("#closeLink").click(function () {
$('#contactForm').toggle("slow");
});
});
</script>
</body>
</html>
Su Comentario:
Deje aquí su comentario acerca de este artículo...
Otros artículos del blog
Adapta tu sitio web a la nueva normativa sobre cookies
Atributo download HTML5 para descargar archivos del servidor mediante enlaces
Botón redondeado con CSS
Bucle para recibir todas las variables por POST en PHP
Carga o upload de archivos con CodeIgniter
Columnas múltiples con CSS3
Como evitar la inyección SQL en PHP
Cómo optimizar la etiqueta de título para atraer más tráfico de Google
Como puedo abrir puertos en mi router para acceder remotamente a mi ordenador personal
Contador de caracteres con JQuery
Copias de seguridad avanzadas para bases de datos MySQL
Creando fácilmente imágenes de relleno para tus prototipos
Crear un sticky desplegable en la web
Detectar el sistema operativo, navegador y versión del cliente
Diseño y desarrollo web a la medida
Ejecutar script automáticamente con Cron en Linux
El elemento meter HTML5
El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
El nuevo elemento <picture> de HTML5 para crear imágenes responsive
Elementos fundamentales para trabajar con Codeingniter
Envío de correos o emails con CodeIgniter, guía rápida
Función para extraer la extensión de un archivo con PHP
Guía rápida sobre el elemento br en HTML
Guía rápida sobre el elemento p en HTML
Guía rápida sobre los bordes en CSS
La etiqueta meta viewport en html5
La relación entre el contenido extenso y el convencimiento del usuario
Las fuentes de Google Font para nuestra web y efectos sobre nuestras fuentes
Lo bueno y lo malo del SEO
Los helpers en CodeIgniter para definir nuestras funciones
Mensaje aceptar cookies para cumplir con la Ley General de Protección de Datos (LGPD)
Meta tags de HTML
Múltiples bordes en un contenedor con CSS
Script para automatizar backups de MySQL en servidores Windows
Streams en PHP
Trucos y ejemplos de configuración del archivo htaccess de Apache
Uso de las páginas de error 404 como soporte estratégico de contenidos
¿Cómo crear una API REST con CodeIgniter?
¿Cómo redimensionar imágenes con CodeIgniter?
¿Qué documentos necesitas para solicitar la ayuda como emigrante retornado?
¿Qué es y para qué sirve un archivo robots.txt?