Step Navigation

step_panel

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4

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>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera