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í:

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

1 2	<link rel="stylesheet" href="estilos.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

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/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<div id="sidebar">       <a href="#" id="icono"><i class="fa fa-bars"></i></a>       <div id="logo">          <a href="#">LOGO</a>     </div>     <!-- Menu del sidebar -->     <div id="menu">         <ul>            <li><a href="#">Inicio</a></li>            <li><a href="#">Acerca de</a></li>            <li><a href="#">Servicios</a></li>            <li><a href="#">Clientes</a></li>            <li><a href="#">Blog</a></li>            <li><a href="#">Contacto</a></li>         </ul>     </div>     <!-- Fin Menu del sidebar -->     <!-- redes sociales -->     <div id="social">         <ul>            <li>             <a href="#"><i class="fa fa-facebook"></i></a>            </li>            <li>             <a href="#"><i class="fa fa-twitter"></i></a>            </li>            <li>             <a href="#"><i class="fa fa-linkedin"></i></a>            </li>            </ul>           <div id="copyright">Copyright © All Rights Reserved.</div>     </div>     <!--Fin redes sociales --> </div>

El código es muy fácil de entender, se trata de HTML básico. Si quieres ver detalles expande la imagen siguiente.

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”

EL CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

*{     padding: 0px;     margin: 0px; } a {     text-decoration: none; } #sidebar{     background: #1A1A1A;     width: 250px;     height: 100%;     top: 0;     left: -250px;     padding: 20px 0 10px 0;     text-align: center;     position: fixed;     transition:left 1s;     -webkit-transition:left 1s;     -moz-transition:left 1s;     -o-transition:left 1s;     -ms-transition:left 1s; } #sidebar:hover{     left :0px; }

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.

1 2 3 4 5 6 7 8 9 10 11

#logo a {     color: #fff;     font-size: 20px;     border: 4px double;     border-radius: 50%;     display: block;     width: 80px;     height: 80px;     margin: 0 auto;     line-height: 80px; }

1 2 3 4 5 6 7 8 9 10 11 12

#icono{     position: absolute;     color: #fff;     background: #1A1A1A;     top: 60px;     left: 250px;     width: 50px;     height: 50px;     border-radius: 0px 4px 4px 0px;     font-size: 32px;     line-height: 50px; }

A continuación los estilos básicos para el menú del sidebar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#menu {     margin-top: 30px; } #menu ul li{     font-family: 'Exo 2', sans-serif;     height: 40px;     margin-top: 5px;     transition: background 1s; } #menu ul li a{     color: #fff; } #menu ul li:hover{     background: #4ABCDD;     border-left: 4px solid #fff;     font-weight: bolder;     font-size: 18px }

A continuación los estilos básicos para las redes sociales, que si recuerdas son iconos vinculados por el framework Font Awesome

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

#social{     position:absolute;     bottom:70px;     left: 20px; } #social ul {     margin: 10px; } #social ul li{     display: inline;     margin-left:10px; } #social li i{     width: 25px;     height: 25px;     border-radius: 50%;     color: #fff;     border: 2px solid #fff;     line-height: 25px; }

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.fa{     line-height: 25px; } .fa-facebook:hover{     background: #3F5C9A;     border: 2px solid #3F5C9A; } .fa-twitter:hover{     background: #54A4DE;     border: 2px solid #54A4DE; } .fa-linkedin:hover{     background: #37678D;     border: 2px solid #37678D; } #copyright{     color: #fff;     font-size: 14px; }

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