Micaela 3 de septiembre de 2009 a las 10.13
   Imprimir artículo
elWebmaster.com

Crea un panel vertical con jQuery y CSS3 en 3 pasos


panelverticalMás y más a menudo, vemos que las personas que utilizan paneles deslizantes horizontales en sus sitios web. Y por lo general tienen un aspecto muy agradable.

Lo cierto es que más allá de lo “bello”, el panel vertical nos da la ventaja de poder condensar información, mostrando lo mínimo indispensable pero dando a nuestros usuarios un atajo rápido para “ver más”.

Algunos ponen un formulario de contacto o inicio de sesión allí, otros ponen algo de información sobre su sitio web, o incluso cosas como una nube de etiquetas o botones de redes sociales.

El Plan

La idea es crear un panel deslizante vertical, que actúe como una especie de cajón en lugar del habitual panel superior deslizante horizontal que impulsa todo lo demás hacia abajo cuando se abre. Al pensar en alternativas a los paneles horizontales de costumbre, surge la posibilidad de crear algo que funcione de manera similar, pero que sea un poco más flexible. Algo así:

imagen

Primero crearemos el markup, luego el CSS y luego utilizaremos jQuery para abrir y cerrar nuestro panel deslizante vertical. Aquí hay 3 demos diferentes:

Estos son todos los archivos que necesitaremos:

  • index.html
  • style.css
  • jQuery library
  • images

1. Markup

Comencemos con el head. Necesitamos declarar un doctype, escribir un título y linkearlo a nuestro archivo CSS y a la librería jQuery (dejaremos que Google albergue el archivo jQuery). Más tarde volveremos sobre este tema y escribiremos nuestro jQuery, pero por ahora comencemos simplemente con esto:

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Vertical Sliding Info Panel With jQuery</title>
  6.     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  7.     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  8. </head>
  9. </html>

Luego, dentro del cuerpo de nuestro documento crearemos un div y le daremos un ID de ‘container‘. Este div guardará todo nuestro contenido principal (Lorem Ipsum en este caso) pero no nuestro panel deslizante. Dentro de este div pondremos un H1, H2, otro div y algunos párrafos:

  1. <div id="container">
  2.     <h1>Vertical Sliding Info Panel With jQuery</h1>
  3.         <h2>The Sliding Panel And Trigger Button On The Left Have Absolute Positioning</h2>
  4.         <p>This is an example of simple page that's centered and has a vertical sliding panel on the far left (try it! click on the 'infos' tab that's on the left!). We used jQuery to create this sliding panel (and CSS3 rounded corners because it looks cool)</p>
  5.         <p><a href="http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/" title="How To Create A Vertical Info Panel With jQuery">Click here to return to the tutorial on SpyreStudios</a></p>
  6.     <div class="content">
  7.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
  8.     </div>
  9. </div>

Luego de este ‘container div‘ escribiremos el código para nuestro panel vertical deslizante y nuestro botón activador. Ponemos algunos párrafos, etiquetas H3 y algunos links y listas desordenadas en el panel deslizante:

  1. <div class="panel">
  2.     <h3>Sliding Panel</h3>
  3.     <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
  4.     <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>
  5.  
  6.     <h3>A Little Something About Me</h3>
  7.     <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
  8.     <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
  9.  
  10. <div style="clear:both;"></div>
  11. <div class="columns">
  12.     <div class="colleft">
  13.     <h3>Navigation</h3>
  14.         <ul>
  15.             <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
  16.             <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
  17.             <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
  18.             <li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
  19.             <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
  20.         </ul>
  21.     </div>
  22.  
  23.     <div class="colright">
  24.         <h3>Social Stuff</h3>
  25.         <ul>
  26.             <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
  27.             <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
  28.             <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
  29.             <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
  30.             <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
  31.         </ul>
  32.     </div>
  33. </div>
  34. <div style="clear:both;"></div>
  35.  
  36. </div>
  37. <a class="trigger" href="#">infos</a>

Y luego podemos terminar nuestro documento con las etiquetas de cierre de cuerpo y html. Ahora pasemos al CSS…

2. CSS

Como verán el CSS es bastante simple. Sólo hemos añadido algunas esquinas CSS3 redondeadas al div contenedor principal y al botón de disparo y el panel deslizante. También se darán cuenta de que el botón disparador y el panel tienen la posición absoluta de la izquierda. Esto hará que el botón y el panel se coloquen en el borde izquierdo de la ventana del navegador.

Haz clic aquí para ver un ejemplo »

  1. body {
  2. background:#1a1a1a;
  3. text-align:left;
  4. color:#666;
  5. width:700px;
  6. font-size:14px;
  7. font-family:georgia, 'time new romans', serif;
  8. margin:0 auto;
  9. padding:0;
  10. }
  11.  
  12. a:focus {
  13. outline: none;
  14. }
  15.  
  16. h1 {
  17. font-size: 34px;
  18. font-family: verdana, helvetica, arial, sans-serif;
  19. letter-spacing:-2px;
  20. color:#9FC54E;
  21. font-weight:700;
  22. padding:20px 0 0;
  23. }
  24.  
  25. h2 {
  26. font-size: 24px;
  27. font-family: verdana, helvetica, arial, sans-serif;
  28. color:#444444;
  29. font-weight: 400;
  30. padding: 0 0 10px;
  31. }
  32.  
  33. h3 {
  34. font-size:14px;
  35. font-family:verdana, helvetica, arial, sans-serif;
  36. letter-spacing:-1px;
  37. color:#fff;
  38. font-weight: 700;
  39. text-transform:uppercase;
  40. margin:0;
  41. padding:8px 0 8px 0;
  42. }
  43.  
  44. img{
  45. float: right;
  46. margin: 3px 3px 6px 8px;
  47. padding: 5px;
  48. background: #222222;
  49. border: 1px solid #333333;
  50. }
  51.  
  52. p {
  53. color:#cccccc;
  54. line-height:22px;
  55. padding: 0 0 10px;
  56. margin: 20px 0 20px 0;
  57. }
  58.  
  59. img {
  60. border:none;
  61. }
  62.  
  63. #container {
  64. clear: both;
  65. margin: 0;
  66. padding: 0;
  67. }
  68.  
  69. #container a{
  70. float: right;
  71. background: #9FC54E;
  72. border: 1px solid #9FC54E;
  73. -moz-border-radius-topright: 20px;
  74. -webkit-border-top-right-radius: 20px;
  75. -moz-border-radius-bottomleft: 20px;
  76. -webkit-border-bottom-left-radius: 20px;
  77. text-decoration: none;
  78. font-size: 16px;
  79. letter-spacing:-1px;
  80. font-family: verdana, helvetica, arial, sans-serif;
  81. color:#fff;
  82. padding: 20px;
  83. font-weight: 700;
  84. }
  85.  
  86. #container a:hover{
  87. float: right;
  88. background: #a0a0a0;
  89. border: 1px solid #cccccc;
  90. -moz-border-radius-topright: 20px;
  91. -webkit-border-top-right-radius: 20px;
  92. -moz-border-radius-bottomleft: 20px;
  93. -webkit-border-bottom-left-radius: 20px;
  94. text-decoration: none;
  95. font-size: 16px;
  96. letter-spacing:-1px;
  97. font-family: verdana, helvetica, arial, sans-serif;
  98. color:#fff;
  99. padding: 20px;
  100. font-weight: 700;
  101. }
  102.  
  103. .content {
  104. font-style:normal;
  105. font-family:helvetica, arial, verdana, sans-serif;
  106. color:#ffffff;
  107. background:#333333;
  108. border:1px solid #444444;
  109. -moz-border-radius-topright: 20px;
  110. -webkit-border-top-right-radius: 20px;
  111. -moz-border-radius-bottomleft: 20px;
  112. -webkit-border-bottom-left-radius: 20px;
  113. margin: 30px 0 50px;
  114. padding: 15px 0;
  115. }
  116.  
  117. .content p {
  118. margin: 10px 0;
  119. padding: 15px 20px;
  120. }
  121.  
  122. .panel {
  123. position: absolute;
  124. top: 50px;
  125. left: 0;
  126. display: none;
  127. background: #000000;
  128. border:1px solid #111111;
  129. -moz-border-radius-topright: 20px;
  130. -webkit-border-top-right-radius: 20px;
  131. -moz-border-radius-bottomright: 20px;
  132. -webkit-border-bottom-right-radius: 20px;
  133. width: 330px;
  134. height: auto;
  135. padding: 30px 30px 30px 130px;
  136. filter: alpha(opacity=85);
  137. opacity: .85;
  138. }
  139.  
  140. .panel p{
  141. margin: 0 0 15px 0;
  142. padding: 0;
  143. color: #cccccc;
  144. }
  145.  
  146. .panel a, .panel a:visited{
  147. margin: 0;
  148. padding: 0;
  149. color: #9FC54E;
  150. text-decoration: none;
  151. border-bottom: 1px solid #9FC54E;
  152. }
  153.  
  154. .panel a:hover, .panel a:visited:hover{
  155. margin: 0;
  156. padding: 0;
  157. color: #ffffff;
  158. text-decoration: none;
  159. border-bottom: 1px solid #ffffff;
  160. }
  161.  
  162. a.trigger{
  163. position: absolute;
  164. text-decoration: none;
  165. top: 80px; left: 0;
  166. font-size: 16px;
  167. letter-spacing:-1px;
  168. font-family: verdana, helvetica, arial, sans-serif;
  169. color:#fff;
  170. padding: 20px 40px 20px 15px;
  171. font-weight: 700;
  172. background:#333333 url(images/plus.png) 85% 55% no-repeat;
  173. border:1px solid #444444;
  174. -moz-border-radius-topright: 20px;
  175. -webkit-border-top-right-radius: 20px;
  176. -moz-border-radius-bottomright: 20px;
  177. -webkit-border-bottom-right-radius: 20px;
  178. -moz-border-radius-bottomleft: 0px;
  179. -webkit-border-bottom-left-radius: 0px;
  180. display: block;
  181. }
  182.  
  183. a.trigger:hover{
  184. position: absolute;
  185. text-decoration: none;
  186. top: 80px; left: 0;
  187. font-size: 16px;
  188. letter-spacing:-1px;
  189. font-family: verdana, helvetica, arial, sans-serif;
  190. color:#fff;
  191. padding: 20px 40px 20px 20px;
  192. font-weight: 700;
  193. background:#222222 url(images/plus.png) 85% 55% no-repeat;
  194. border:1px solid #444444;
  195. -moz-border-radius-topright: 20px;
  196. -webkit-border-top-right-radius: 20px;
  197. -moz-border-radius-bottomright: 20px;
  198. -webkit-border-bottom-right-radius: 20px;
  199. -moz-border-radius-bottomleft: 0px;
  200. -webkit-border-bottom-left-radius: 0px;
  201. display: block;
  202. }
  203.  
  204. a.active.trigger {
  205. background:#222222 url(images/minus.png) 85% 55% no-repeat;
  206. }
  207.  
  208. .columns{
  209. clear: both;
  210. width: 330px;
  211. padding: 0 0 20px 0;
  212. line-height: 22px;
  213. }
  214.  
  215. .colleft{
  216. float: left;
  217. width: 130px;
  218. line-height: 22px;
  219. }
  220.  
  221. .colright{
  222. float: right;
  223. width: 130px;
  224. line-height: 22px;
  225. }
  226.  
  227. ul{
  228. padding: 0;
  229. margin: 0;
  230. list-style-type: none;
  231. }
  232.  
  233. ul li{
  234. padding: 0;
  235. margin: 0;
  236. list-style-type: none;
  237. }

Si deseas colocar el botón de disparo y el panel deslizante a la derecha de la ventana, basta con editar el a.trigger y panel y cambiar ‘left‘ por ‘right‘. De esto:

  1. a.trigger{
  2. position: absolute;
  3. top: 80px; left: 0;
  4. }
  5.  
  6. .panel {
  7. position: absolute;
  8. top: 50px; left: 0;
  9. }

A esto:

  1. a.trigger{
  2. position: absolute;
  3. top: 80px; right: 0;
  4. }
  5.  
  6. .panel {
  7. position: absolute;
  8. top: 50px; right: 0;
  9. }

Y también asegúrate de editar las esquinas redondeadas de esto:

  1. border:1px solid #444444;
  2. -moz-border-radius-topright: 20px;
  3. -webkit-border-top-right-radius: 20px;
  4. -moz-border-radius-bottomright: 20px;
  5. -webkit-border-bottom-right-radius: 20px;

A esto:

  1. border:1px solid #444444;
  2. -moz-border-radius-topleft: 20px;
  3. -webkit-border-top-left-radius: 20px;
  4. -moz-border-radius-bottomleft: 20px;
  5. -webkit-border-bottom-left-radius: 20px;

Haz clic aquí para ver un ejemplo »

Hacer esto colocará al botón disparador y panel desplazante a la derecha y posicionará las esquinas redondeadas a la izquierda.

Si deseas que el botón disparador y el panel deslizable estén siempre visible cuando realizas scroll hacia arriba y abajo, cambia el posicionamiento absoluto por posicionamiento fijo, de esta forma:

  1. a.trigger{
  2. position: fixed;
  3. top: 80px; left: 0;
  4. }
  5.  
  6. .panel {
  7. position: fixed;
  8. top: 50px; left: 0;
  9. }

Haz clic aquí para ver un ejemplo »

Y si deseas remover la transparencia del panel deslizante, simplemente quita o edita esta parte del CSS:

  1. filter: alpha(opacity=85);
  2. opacity: .85;

3. jQuery

Ahora sólo falta el jQuery.

Dado que ya hemos escrito el markup sabemos que el botón posee una clase de ‘.trigger‘ y el panel deslizante una clase de ‘.panel‘. Este código irá justo antes de la etiqueta head que cierra en la sección de la cabecera:

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Vertical Sliding Info Panel With jQuery</title>
  8. <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  9. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  10.  
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13.     $(".trigger").click(function(){
  14.         $(".panel").toggle("fast");
  15.         $(this).toggleClass("active");
  16.         return false;
  17.     });
  18. });
  19. </script>
  20. </head>
  21. </html>

Esto le dirá al navegador que abra y cierre (toggle) el panel cuando el botón activador sea apretado. También le dará una clase de ‘active‘ a nuestro botón disparador. Esto hará que el signo verde de más sea cambiado por uno rojo de menos.

Bastante sencillo, teniendo en cuenta los resultados…

Fuente: Spyre Studios


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (11)

  1. horacio dice:

    En IE 6 no funciona el ejemplo del fixed chicos.

  2. horacio dice:

    perdón, vamos de nuevo….excelente el articulo !!! Muchas Gracias!!!
    Me parece que en Internet Explorer 6 no funciona :'(

    Salu2 Gracias de nuevo.

  3. Morton dice:

    Hola, Horacio

    El navegador Internet Explorer 6 no presenta buena compatibilidad con este tipo de innovaciones. Lamentablemente, sigue siendo un navegador utilizado, pero te recomendaría que enfoques tus fuerzas en IE7, IE8 y Firefox, entre otros.

    Un saludo!

  4. Max Ornelas dice:

    Había buscado algo como esto hasta debajo de las piedras. Porqué pasará que encuentras las cosas cuando ya no las buscas?

    De todas formas aun estoy a tiempo de implementar este panel, gracias!!

  5. adriana dice:

    hola!…. no me funciona el desplieguee del boton… + o -… en firefox.. :(

  6. gesell dice:

    Excelente tutorial y efecto del panel lateral.

  7. Edwin dice:

    Excelente proyecto, pero tengo una pregunta se podrá implementar este proyecto a multipestañas? Saludos

  8. Cristian dice:

    quisiera saber como hago para que cuando solo pase el mouse se despliegue el panel vertical ?????

  9. mAltamira dice:

    hola, excelente tutorial, sabes estoy probando pero al hacer click sobre la class “trigger” si se despliega la class “panel” pero al dar nuevamente click para que se retire no lo hace, probablmenete es el codigo JQuery pero al double check no creo que sea. Algo me esta faltando en las clases donde el hace el “toggle”. No lo copie igual ya que lo adapte a mi ejercicio que es mas simple, es decir que basicamente solo despliegue y retire el “panel”, que podria ser ???

  10. mAltamira dice:

    hola, excelente tutorial, sabes estoy probando pero al hacer click sobre la class “trigger” si se despliega la class “panel” pero al dar nuevamente click para que se retire no lo hace, probablmenete es el codigo JQuery pero al double check no creo que sea. Algo me esta faltando en las clases donde el hace el “toggle”. No lo copie igual ya que lo adapte a mi ejercicio que es mas simple, es decir que basicamente solo despliegue y retire el “panel”, que podria ser ???

  11. mAltamira dice:

    ok, ya resolvi lo anterior, ahora me pregunto como hago para que siga estando activa la class “trigger” es decir que siga estando por encima de la nueva div desplegada ya que en el mio cuando se despliega de alguna forma la queda por encima y ya no puedo darle click nuevamente para volver a realizar el “toggle”, lo vi porque al desplegarse el div “panel” y me coloco sobre el el pointer ya no es de link, saludes

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder