Noticias 

Aprende cómo hacer un sliding sidebar Solamente con CSS

Existen muchos plugins basados en JavaScript que podemos utilizar para agregar comportamientos especiales a nuestras paginas web, muchos de estos comportamientos los podemos implementar con CSS y las propiedades de CSS3 y así nos ahorraríamos el tener que cargar librerías o cualquier tipo de script en nuestra pagina web, lo único que debemos de hacer es conocer bien CSS para sacar el mejor provecho de este lenguaje.
En este tutorial vamos a crear un sliding sidebar solamente con CSS y sin cargar algún script, este ejercicio será algo muy sencillo para a la vez muy practico.
¿Qué es un Sliding Sidebar?
Bueno esta es una simple técnica que consiste es esconde un elemento, en este caso un sidebar o una barra lateral y mostrarla cuando sea requerida por el usuario y esto se da mediante una acción de el, ya sea con un clic o haciendo hover sobre un elemento.

Algo mas o menos así:
sliding-sidebar-solo-con-CSS
Así que vamos primero con el HTML básico y luego te explicare a continuación cada parte en una imagen del código.

EL HTML

Bueno antes, de comenzar con el html tenemos que vincular las hojas de estilos que influirán en el documento
En este caso, vincule la hoja de estilos básica y la hoja de estilos de Font Awesome, este es un framework de CSS que nos provee de iconos vectoriales de poco peso y que se comportan como las fuentes tipográficas, podemos utilizarlo desde el CDN de Bootstrap < link href=”//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet” /> o descargarlo y vincularlo como he hecho yo http://fortawesome.github.io/Font-Awesome/
El código es muy fácil de entender, se trata de HTML básico. Si quieres ver detalles expande la imagen siguiente.
explicacion-codigo-html-para-sliding-sidebar-con-css
Nota: Para utilizar las fuentes Font Awesome solo colocamos el código del icono que encontramos en la sección icons de la web oficial. Ejemplo para Facebook es class=”fa Facebook”
fontawesome-facebook

EL CSS

Comenzamos con los CSS del sidebar dándole color de fondo, altura, anchura, padding y lo posicionamos fijamente en la pantalla con el valor fixed y le damos -250px a su izquierda para que se oculte por completo, luego en el estado hover es decir cuando situé el mause sobre el, lo volvemos a la posición inicial 0. Y  la propiedad transition es para que cambio de estado  de left -250 a 0 sea con transición, como una animación elegante.
logo-tutorial
icono-boton-tutorial
A continuación los estilos básicos para el menú del sidebar.
A continuación los estilos básicos para las redes sociales, que si recuerdas son iconos vinculados por el framework Font Awesome
y por ultimo aplicamos estilos a los iconos de las redes sociales cuando estén en el estado hover, los hacemos individualmente por que le aplicamos colores diferentes ya que cada uno tiene una clase diferente.
y esto es todo, ya podemos implementar este sliding sidebar que hicimos funcionar solo con CSS en nuestros proyecto, el soporte es total y es fácil para editar y adaptar.

Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas relacionadas