listas1.jpg

jQuery Sequential List, un simple Tips con el que aprenderás a crear listas Secuenciales utilizando jQuery y CSS. Podrás encontrar un tips para crear listas Generales muy vistosas y otro para incorporar estas listas a nuestros bloques de de comentarios.

Ver Demo - Mas info jQuery Sequential List

Uso:

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  $("#step li").each(function (i) {
    i = i+1;
    $(this).addClass("item" i);
   });

});
</script>

PLAIN TEXT
CSS:
/* step style */
#step {
    margin: 10px 0 40px;
    padding: 0;
}
#step li {
    padding: 3px 0 6px 110px;
    margin: 0 0 20px;
    list-style: none;
}
#step h3 {
    font: bold 200%/100% Arial, Helvetica, sans-serif;
    margin: 0 0 5px;
    color: #666;
}
#step .item1 {
    background: url(images/step1.png) no-repeat;
}
#step .item2 {
    background: url(images/step2.png) no-repeat;
}
#step .item3 {
    background: url(images/step3.png) no-repeat;
}
#step .item4 {
    background: url(images/step4.png) no-repeat;
}

Ccreando Listas

PLAIN TEXT
HTML:
<ol id="step">
    <li>
        <h3> Titulo</h3>
        <p>Contenido........... </p>
    </li>
    <li>
        <h3> Titulo</h3>
        <p>Contenido........... </p>
    </li>
    <li>
        <h3> Titulo</h3>
        <p>Contenido........... </p>
    </li>
    <li>
        <h3> Titulo</h3>
        <p>Contenido........... </p>
    </li>
</ol>