HTML
-
<ul id=”green_and_orange_step_menu”>
-
<li class=”frist “>Step 1</li>
-
<li>Step 2<span></span></li>
-
<li>Step 3<span></span></li>
-
<li class=”last”>Step 4<span></span></li>
-
</ul>
-
<div style=”clear:both;”></div>
-
<ul id=”green_and_orange_step_menu”>
-
<li class=”frist fdone”>Step 1</li>
-
<li class=”inprogress”>Step 2<span></span></li>
-
<li>Step 3<span></span></li>
-
<li class=”last”>Step 4<span></span></li>
-
</ul>
-
<div style=”clear:both;”></div>
-
<ul id=”green_and_orange_step_menu”>
-
<li class=”frist fdone”>Step 1</li>
-
<li class=”done”>Step 2<span></span></li>
-
<li class=”inprogress”>Step 3<span></span></li>
-
<li class=”last”>Step 4<span></span></li>
-
</ul>
-
<div style=”clear:both;”></div>
-
<ul id=”green_and_orange_step_menu”>
-
<li class=”frist fdone”>Step 1</li>
-
<li class=”done”>Step 2<span></span></li>
-
<li class=”done”>Step 3<span></span></li>
-
<li class=”last lastinprogress”>Step 4<span></span></li>
-
</ul>
-
<div style=”clear:both;”></div>
-
<ul id=”green_and_orange_step_menu”>
-
<li class=”frist fdone”>Step 1</li>
-
<li class=”done”>Step 2<span></span></li>
-
<li class=”done”>Step 3<span></span></li>
-
<li class=”last ldone”>Step 4<span></span></li>
-
</ul>
CSS
-
<style>
-
#green_and_orange_step_menu { margin:0; padding:5px; display:inline-table; list-style:none; }
-
#green_and_orange_step_menu li{ display:inline; float:left; background:url(images/step_orange_green.gif) no-repeat -50px bottom; height:41px; line-height:41px; font-size:11px; padding:0 30px 0 25px; position:relative;}
-
#green_and_orange_step_menu li span{ margin:0px; z-index:2000; background:url(images/step_orange_green.gif) no-repeat left bottom; display:block; position:absolute; height:41px; line-height:41px; width:13px; top:0; left:-10px; padding:0;}
-
#green_and_orange_step_menu li.inprogress { background-position:-50px 0px}
-
#green_and_orange_step_menu li.inprogress span, #green_and_orange_step_menu li.lastinprogress span{background-position:left 0px }
-
#green_and_orange_step_menu li.done {background-position: -50px -41px}
-
#green_and_orange_step_menu li.done span, #green_and_orange_step_menu li.ldone span {background-position:left -41px }
-
#green_and_orange_step_menu li.frist, #green_and_orange_step_menu li.done, #green_and_orange_step_menu li.inprogress, #green_and_orange_step_menu li.ldone, #green_and_orange_step_menu li.lastinprogress { color:#FFF;}
-
#green_and_orange_step_menu li.frist {background-position: -20px 0px }
-
#green_and_orange_step_menu li.fdone { background-position: -20px -41px }
-
#green_and_orange_step_menu li.last {background-position: right bottom }
-
#green_and_orange_step_menu li.lastinprogress { background-position: right 0}
-
#green_and_orange_step_menu li.ldone { background-position: right -41px}
-
</style>
