Hacer un acordeón de contenido fresco

Al desarrollar un sitio web, es un gran desafío poder organizar el contenido de tal manera que sea a la vez intrigante y llamativo. Sin mencionar lo importante que es evitar la sobrecarga de información al exponer a sus visitantes a demasiados datos en una sola vista.

Es por esto que existen ciertas técnicas que ayudan a los diseñadores a agrupar el contenido y mostrarlo solo si el usuario está interesado en lo que tienes para ofrecer e interactúa con la página.

Hoy estamos creando un acordeón simple pero llamativo con la ayuda de CSS, jQuery y el complemento de aceleración para algunos efectos sofisticados.

Puede continuar y descargar los archivos de demostración antes de continuar con el paso uno.

Paso 1 - XHTML

Como puede ver en la demostración, el acordeón está dividido en cuatro secciones, cada una definida por un LI elemento con un nombre de clase de menu . Se colocan dentro de la lista principal desordenada (ul.container ) y comparten una estructura XHTML común:

demostración.html

<li class="menu"> <!-- This LI is positioned inside the main UL -->

<ul> <!-- This UL holds the section title and content  -->

<!-- The click-able section title with a unique background: -->
<li class="button"><a href="#" class="green">Kiwis <span></span></a></li>

<!-- The dropdown list, hidden by default and shown on title click: -->
<li class="dropdown">

<ul> <!-- This list holds the options that are slid down by jQuery -->

<!-- Each option is in its own LI -->
<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
<li><a href="http://www.flickr.com/search/' alt='' />

Step 2 - CSS
If styled properly, even the simplest idea can make a big difference in the overall feeling your site gives to the visitors.
It is important to take extra care so that the CSS code you produce is valid and that it works well across different browsers. I've included all the styles used in the demo below:
demo.css - part 1
body{
    /* Setting default text color, background and a font stack */
    color:#cccccc;
    font-size:13px;
    background: #302b23;
    font-family:Arial, Helvetica, sans-serif;
}

ul{
    margin:0;
    padding:0;
}

ul.container{
    /* The main UL */
    width:240px;
    margin:0 auto;
    padding:50px;
}

li{
    list-style:none;
    text-align:left;
}

li.menu{
    /* The main list elements */
    padding:5px 0;
    width:100%;
}

li.button a{
    /* The section titles */
    display:block;
    font-family:BPreplay,Arial,Helvetica,sans-serif;
    font-size:21px;
    height:34px;
    overflow:hidden;
    padding:10px 20px 0;
    position:relative;
    width:200px;
}
 

 Aquí diseñamos el UL principal:ul.container , que contiene el resto de los elementos. Por último, definimos el aspecto de los hipervínculos que actúan como títulos de sección (observe que las imágenes de fondo reales aún no están asignadas).
 
demo.css - parte 2
 
li.button a:hover{
    /* Removing the inherited underline from the titles */
    text-decoration:none;
}

li.button a span{
    /* This span acts as the right part of the section's background */
    height:44px;
    position:absolute;
    right:0;
    top:0;
    width:4px;
    display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}

li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(img/green.png) repeat-x top right;}

li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}

li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(img/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
    /* The expandable lists */
    display:none;
    padding-top:5px;
    width:100%;
}

.dropdown li{
    /* Each element in the expandable list */
    background-color:#373128;
    border:1px solid #40392C;
    color:#CCCCCC;
    margin:5px 0;
    padding:4px 18px;
}
 

 La parte más interesante aquí es cómo especificamos la propiedad de fondo individual para cada color de sección. También proporcionamos un fondo para el elemento span, que contiene la parte derecha de la imagen de fondo, como se explica en la siguiente ilustración.
  
Paso 3:jQuery
 

 Después de haber establecido el diseño del acordeón, es hora de hacerlo funcionar. Primero, debemos incluir algunos scripts en la página (este código se coloca dentro de la sección de encabezado del documento):
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>
 

 Primero incluimos la biblioteca jQuery del CDN de Google, que nos ayudará a escribir código compacto y compatible. Más tarde, incluimos el complemento de aceleración y, por último, nuestro propio archivo de secuencia de comandos, que he cubierto en detalle a continuación.
 

 Como habrá notado en la demostración, el efecto de deslizamiento hacia abajo no es su movimiento lineal habitual, sino más parecido a un rebote y animado. Esto se logra con la ayuda de la relajación Complemento para jQuery. Proporciona una serie de efectos interesantes que pueden poner esos hermosos detalles en su diseño web.
 

 Ahora continuemos con nuestro propio archivo de scripts.
 
secuencia de comandos.js
 
$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    $.easing.def = "easeOutBounce";

    /* Binding a click event handler to the links: */
    $('li.button a').click(function(e){

        /* Finding the drop down list that corresponds to the current section: */
        var dropDown = $(this).parent().next();

        /* Closing all other drop down sections, except the current one */
        $('.dropdown').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');

        /* Preventing the default event (which would be to navigate the browser to the link's address) */
        e.preventDefault();
    })

});
 

 Primero establecemos el método de aceleración que utilizará slideUp /deslizar hacia abajo efectos y, a continuación, vincule una función especialmente diseñada al evento de clic del li.button Hipervínculo. Cuando se hace clic en este enlace, obtenemos el li.dropDown correspondiente y mostrarlo, ocultando todos los demás.
 

 Estoy usando slideToggle método jQuery, que comprueba si el elemento ya está visible en la página y decide si mostrarlo u ocultarlo. De esta manera, cuando hace clic en una sección abierta del acordeón, se contrae en lugar de permanecer abierta.
 

 Después de esto, usamos e.preventDefault() para evitar que el navegador se aleje de la página (después de todo, acabamos de hacer clic en un enlace y este es el comportamiento normal).
 

 ¡Con esto nuestro acordeón afrutado CSS y jQuery está completo!
  
Conclusión
 

 Esta vez creamos un nuevo script de acordeón que es fácilmente modificable e incrustable.
 

 ¿Puedes pensar en algún uso increíble de este script?
 

 ¿Cómo te gustaría cambiarlo?