진행상태바형 메뉴 가변폭 소스(NULI소스 수정)

원본소스 : http://html.nhndesign.com/uio_factory/ui_pattern/etc/11

NULI UIO팩토리에 있는 진행상태바 소스를 가져다가 메뉴용으로 사용하려고 보니 가변폭 지원이 안돼있더군욤..
그래서 각 단계별 가로폭이 유동적이게 되도록 소스를 약간 수정해봤습니다.
샘플로 쓰인 배경이미지(선택시)가 가로300px이라 각 단계별 가로폭이 300px이 넘어갈 경우에는 이미지 가로크기를 충분히 더 늘려서 사용해야 된답니다~

참고로 IE6이하 버전은 지원하지 않아요~ 모바일웹에 사용할꺼라 IE6이하는 깔끔하게 무시했습니닷-
이렇게 속편할 수가 ㅋㅋ

 

기본 배경이미지 : http://static.naver.com/groupware/2010/bg_progress.gif
선택시 배경이미지 : http://static.naver.com/groupware/2010/bg_progress_item.gif

<style type=text/css>
/*진행상태바*/
.prog{float:left;list-style:none;width:100%;height:25px;margin:0;padding:0;color:#666;overflow:hidden;background:url(http://static.naver.com/groupware/2010/bg_progress.gif);border-right:1px solid #e3e3e3;font-family:'돋움',dotum;font-size:11px;line-height:15px;letter-spacing:-1px}
.prog li,
.prog li a{background:url(http://static.naver.com/groupware/2010/bg_progress_item.gif) no-repeat;font-size:11px;white-space:nowrap;color:#666;}
.prog li{float:left;width:25%;margin:0 0 0 -13px;padding:0 0 0 13px;text-align:center;background-position:-287px 0}
.prog li a{display:block;height:20px;padding:5px 28px 0 13px;background-position:100% top;text-decoration:none;}
.prog li.last a{background:none;padding-right:15px;}
.prog li:hover,
.prog li:active,
.prog li:focus,
.prog li.on{position:relative;z-index:10;background-position:0 100%;color:#fff}
.prog li:hover a,
.prog li:active a,
.prog li:focus a,
.prog li.on a{background:url(http://static.naver.com/groupware/2010/bg_progress_item.gif) no-repeat 100% 100%;color:#fff}
.prog li.last:hover a,
.prog li.last:active a,
.prog li.last:focus a,
.prog li.last.on a{background-position:50% 100%;}
</style>

<ol class="prog">
    <li class="on"><a href="#">단계 1</a></li>
    <li><a href="#">단계 2</a></li>
    <li><a href="#">단계 3</a></li>
    <li class="last"><a href="#">완료</a></li>
</ol>