Cargando

Ir a contenido

X

 


Crear acordión con Material Design

Te mostramos cómo puedes crear un acordión con Material Design utilizando el framework Materialize.


Escrito por el sep 09 2015 18:22


Los acordiones son una de las formas más populares de organizar información y luego utilizando distintos efectos podemos mostrar esa información contenida en los mismos. Estos ya tienen un tiempo en la web y los podemos implementar con frameworks como jQuery, Bootstrap e incluso si somos atrevidos construirlos haciendo uso de solo HTML5 y CSS3.

 

Pero las tecnologías evolucionan rápidamente y a pesar que implementar un acordión utilizando los frameworks mencionados es bastante sencillo, todavía hay métodos que sobrepasan esta sencillez. Uno de estos es hacerlo con el nuevo lenguaje de diseño llamado Material Design y apoyándonos del framework Materialize para ello.

 

Acordiones en Material Design

Los acordiones en Material Design no solo son sencillos de implementar, también tenemos varias funcionalidades para los mismos, lo que nos da una variedad mucho más amplia para nuestro sitio web, entre ellos tenemos los siguientes:

 

Accordion

Es el clásico y permite organizar la información en bloques que colapsan uno tras otro al hacer click sobre los mismos, estos son definidos con la clase collapsible accordion.

 

Popout

Los acordiones de tipo popout agregan un nuevo efecto al popular componente y combinan la funcionalidad clásica con efectos de despliegue mucho más elaborado, estos son definidos con la clase collapsible popout.

 

Expandable

Por último los acordiones expandable o expandibles permiten abrir múltiples acordiones a la vez, es decir, el acordión que este activo no se cerrará si deseamos ver algún otro, para definir este tipo de acordiones se utiliza el atributo data-collapsible de tipo expandable.

 

Una vez que ya sabemos cuáles son los tipos de acordiones que podemos implementar, vamos a realizar un ejemplo donde incluimos los tres tipos en una sola página.

 

 

Implementando los acordiones web


Lo primero que debemos hacer es incluir las librerías de Materialize, tanto el archivo .js como la hoja de estilo del framework, es importante que también hagamos enlace a los íconos para poder utilizarlos en nuestro ejemplo y sin olvidarnos de la versión más reciente de jQuery antes de la librería JavaScript de Materialize:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
	   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
Una vez hecho esto vamos a crear una estructura de tres contenedores por cada acordión que implementemos, el primero será el acordión estándar y para definirlo necesitaremos crear una estructura de ul y li que iremos identificando con las clases correspondientes:
<h3><font color="#ee6e73" size="30">Acordion estandar con Material Design</font></h3>
	   <ul class="collapsible accordion" data-collapsible="accordion">
    <li>
	  <div class="collapsible-header"><i class="material-icons">filter_drama</i>Primero</div>
	  <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
	  <div class="collapsible-header"><i class="material-icons">place</i>Segundo</div>
	  <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
	  <div class="collapsible-header"><i class="material-icons">whatshot</i>Tercero</div>
	  <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>
Es importante mencionar que para cada elemento dentro del acordión debemos definir las clases de collapsible-header y el collapsible-body, es decir, el título y el mensaje de cada uno, veamos como luce nuestro primer acordión.

 

 

Como vemos luce bastante bien y no tuvimos que hacer nada complicado, ahora vamos a crear nuestro acordión de tipo popout, y para ello lo único que tenemos que hacer es agregar la clase collapsible popout y mantener la estructura del ejemplo anterior con eso crearemos nuestra funcionalidad, veamos el fragmento de código para esto:

<ul class="collapsible popout" data-collapsible="accordion">
Por ultimo para crear nuestro acordión expandible solo necesitamos agregar al data-collapsible la opción expandable y cómo hicimos anteriormente mantenemos la estructura y ya tendríamos nuestra funcionalidad:
<ul class="collapsible accordion" data-collapsible="expandable">
Para poder apreciar el funcionamiento de nuestros acordiones veamos como lucen a continuación.

 

video-animado1.gif

 

Como vemos hemos creado una funcionalidad sumamente poderosa y visualmente impactante en tan solo unos minutos, solo queda de parte de cada quien tomar el ejemplo y adaptarlo a sus necesidades para crear funcionalidades ricas y útiles para cualquier sitio web o aplicación actual.

 

Fichero Adjunto  acordion_material_design.html   2,87K   77 Descargas


Tutoriales Relacionados


2 Comentarios


Juan Agostopa Rafael
abr 26 2016 13:03
Como puedo editar el acordeón lo quiero implementar en mi menú

Pffff a mi me ha encantado este menú. También lo quiero para el site. Tiene muy buena pinta y es moderno.

 

 

Como puedo editar el acordeón lo quiero implementar en mi menú

 

Simplemente debes editarlo, usa notepad++ para retocar el CSS que requieras y lo implementas.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 09 2015 18:22
  •   Actualizado ago 25 2016 09:31
  •   Visitas 2.3K
  •   Nivel
    Profesional