메뉴만들기(img src 이용) > html

 menu 만들어보기

 정리사항 

 메인타이틀은 파란색, naming은 h2_카테고리depth(gif)

 카테고리이름

 선택된상태 : 파란색, 오른쪽 화살표 푸른색

 상세메뉴

 오버상태 - 왼쪽 bar검정으로 변경, 배경 회색

 선택된상태 - 왼쪽 bar 검정으로 변경, 글자색검정 이미지 변경, 배경 회색

 이미지를 정리해서 자른다.

 뭐 이런식으로...

마크업
<ul class="lnbDeps1">
<li><strong class="lnbTitle"><img src="h2_480.gif" alt="법무"></strong></li>

<li class="menu1 top"><a href="#none"><img src="lnb_481_off.png" alt="안내">

<span class="close">&nbsp;</span></a>
  <ul class="lnbDeps2 active">
  <li class="menu2"><a href="#none"><img src="lnb_4811_off.png" alt="Legal Solution"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4812_off.png" alt="고객정보보호"></a></li>
  <li class="menu2"><a href="#nonel"><img src="lnb_4813_off.png" alt="신용카드"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4814_off.png" alt="할부.리스"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4815_off.png" alt="공정거래.약관규제"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4816_off.png" alt="지적재산권"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4817_off.png" alt="CS"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4818_off.png" alt="채권.채무"></a></li>
  </ul>

</li>

<li class="menu1"><a href="#none"><img src="lnb_482_on.png" alt="문의.신청">

<span class="close active">&nbsp;</span></a>
  <ul class="lnbDeps2 active">
  <li class="menu2 on"><a href="#none"><img src="lnb_4821_on.png" alt="FAQ"></a></li>
  </ul>

</li>

<li class="menu1"><a href="#none"><img src="lnb_483_off.png" alt="자료">

<span class="close">&nbsp;</span></a>
  <ul class="lnbDeps2 active">
  <li class="menu2"><a href="#none"><img src="lnb_4831_off.png" alt="법제동향 및 자료실"></a></li>
  <li class="menu2"><a href="#none"><img src="lnb_4832_off.png" alt="교육자료"></a></li>
  </ul>

</li>

</ul> 

대충 이런식으로 할수 있고.. -_-;;

css정리

1. 상단 타이틀위치잡기 #lnb .lnbDeps1 strong.lnbTitle img{padding-left:10px}

2. 큰제목위치 잡아주고, 선택된상태와 그렇지 않은 상태는 img src(_on과 _off 이미지)로,

오른쪽 화살표표시는 span의 class 이름을 주어서 선택된상태는 active 기본상태는 close로 표현... 응? '-'

#lnb li span.close:hover,

#lnb li span.close.active

{background:url(lnb_close_on.png) no-repeat scroll 0 0 transparent;cursor:pointer}

#lnb li span.close

{display:block;position:absolute;top:8px;right:28px;width:14px;height:13px;cursor:pointer;

background:url(lnb_close_off.png) no-repeat scroll 0 0 transparent} 마우스 오버상태정리 : 왼쪽bar 이미지를 lnb_blit_off.png 로 저장하고 변경 그리고 회색배경처리

오버상태는 class #lnb .lnbDeps2 의 li에만 적용됨.

#lnb .lnbDeps2 li{width:155px;height:25px;padding:0 0 0 20px;

background:url(lnb_blit_off.png) no-repeat scroll 8px 12px transparent}  

초 간단... 끝..!