Esta semana en muchos blog, se anunciaba un javascript con el que se podía crear un “Acordeón Horizontal” y ademas de solo 1Kb.

Pués bien, viendo el código (muy claro, por cierto) y los estilos, con unos pequeños retoques, podemos convertirlo en un sistema de persianas, con soporte además para añadir contenido (aparte del título).

Primero descargamos el archivo aquí.

Lo descomprimimos, y abrimos el html y convertimos la lista en esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="sm" class="sm">
   <li>
      <h1>opcion 1</h1>
      <div>Texto para la opcion 1</div>
   </li>
   <li>
      <h1>opcion 2</h1>
      <div>Texto para la opcion 2</div>
   </li>
   <li>
      <h1>opcion 3</h1>
      <div>Texto para la opcion 3</div>
   </li>
   <li>
      <h1>opcion 4</h1>
      <div>Texto para la opcion 4</div>
   </li>
</ul>

Si nos fijamos, he añadido dentro de cada <li>, un <h1> como título y un <div> como contenido

Complementamos el html cambiando la función que se carga “onLoad”. Como eso irá en función de las necesidades de cada uno, yo he optado para este ejemplo de lo siguiente:

<body onload="slideMenu.build('sm',150,20,10,1)">

Ahora abrimos el Javascript y dependiendo del editor que utilicemos, hacemos un buscar y reemplazar, buscando todos los “width”, cambiándolo por “height”.

Ya para terminar “la mano de maquillaje”, abrimos la hoja de estilo y añadimos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.sm {
   border-top: 1px solid #003366;
}
.sm li {
   color: #fff;
   font-family: verdana;
   background: #eee;
   border-left: 1px solid #003366;
   border-right: 1px solid #003366;
   border-bottom: 1px solid #003366;
}
.sm li h1 {
   height: 20px;
   padding:0;
   margin:0;
   font-size: 10px;
   color: #fff;
   background: #006699;
}
.sm li div {
   padding: 5px;
   color: #000;
   font-size: 10px;
}

Y listo. Evidentemente no es un script destinado a representar un verdadero sistema de persianas, pero para salir del paso y por lo que pesa es más que suficiente. Lo que si es cierto, que dependiendo del número de items que tengamos en la lista, habrá que modificar los parámetros de carga del script.

[ ejemplo ] [ descargar ]