CSS Steps

Pure CSS steps. Personalize the sprites to your needs. States: - not done (blank style) - completed - current - last "last completed" needs to be set for correct representation.

HTML

<html>
<head>
    <title>CSS Steps Demo</title>
</head>

<body>
        CSS3 browsers simplified classes
        <div class="">
            <ul class="blue">
                <li class="completed"><a href="#"><em>Step 1</em><span>Description 1</span></a></li>
                <li class="last completed"><a href="#"><em>Step 2</em><span>Description 2</span></a></li>
                <li class="current"><a href="#"><em>Step 3</em><span>Descripci&oacute;n del paso 1</span></a></li>
                <li class=""><a href="#"><em>Step 4</em><span></span></a></li>
                <li class=""><a href="#"><em>Step 5</em><span></span></a></li>
            </ul>
        </div>
        <span style="clear:both; display:block;">&nbsp;</span>
        <div class="steps">
            <ul class="green">
                <li class="completed"><a href="#"><em>Step 1</em><span>Description 1</span></a></li>
                <li class="last completed"><a href="#"><em>Step 2</em><span>Description 2</span></a></li>
                <li class="current"><a href="#"><em>Step 3</em><span>Descripci&oacute;n del paso 1</span></a></li>
                <li class=""><a href="#"><em>Step 4</em><span></span></a></li>
                <li class=""><a href="#"><em>Step 5</em><span></span></a></li>
            </ul>
        </div>

        <span style="clear:both; display:block;">&nbsp;</span>

    Older browsers full compatibility classes
        <div class="steps">
            <ul class="blue 5steps">
                <li class="completed"><a href="#"><em>Step 1</em><span>Description 1</span></a></li>
                <li class="completedLast"><a href="#"><em>Step 2</em><span>Description 2</span></a></li>
                <li class="current"><a href="#"><em>Step 3</em><span>Descripci&oacute;n del paso 1</span></a></li>
                <li class=""><a href="#"><em>Step 4</em><span></span></a></li>
                <li class="end"><a href="#"><em>Step 5</em><span></span></a></li>
            </ul>
        </div>
...

CSS

/**
 *  Steps UL/LI styles.
 *  ================================================
 *  (C) 2011 José Ramón Díaz - [email protected]
 *
 *  Useful wizard step indications
 *
 *  Sample:
 *      <div class="steps">
 *          <ul class="blue">
 *              <li class="completed"><a href="#"><em>Step 1</em><span>Description of step 1</span></a></li>
 *              <li class="last completed"><a href="#"><em>Step 2</em><span>Description of step 2</span></a></li>
 *              <li class="current"><a href="#"><em>Step 3</em><span>Description of step 3</span></a></li>
 *              <li class=""><a href="#"><em>Step 4</em><span></span></a></li>
 *              <li class=""><a href="#"><em>Step 5</em><span></span></a></li>
 *          </ul>
 *      </div>
 *
 *  Classes
 *      N/A              - Uncompleted step. Greyed by default
 *      end              - Last uncompleted step. Greyed and no "arrow". Modern browsers just need "last" class instead of end.
 *      last             - Boundary class. Marks last completed step and last step. Used only by modern browsers (the ones with the ability of interpret multiple classes for one element)
 *      current          - Current step
 *      completed        - Completed step. Lighter color
 *      completedLast    - Last completed step. Older browsers compatibility. Modern browsers just need "last completed" classes
 *      completedLastEnd - Last step when all steps are completed. Older browsers compatibility. Modern browsers just need "last completed" classes
 *
 *  If you plan to use only actual browsers just need the classes "", "current" and "completedLast OR "last completed"
 *  If you need full browsers compatibiliy, you need "", "end", "current", "completed", "completedLast" and "completedLastEnd"
 *
 * Extending steps with jQuery
 *     You can also use the steps jQuey plugin. You can find it at
 *     http://3nibbles.blogspot.com/2011/06/pasos-de-wizard.html
 *     
 *  Legal stuff
 *      You are free to use...