서브메뉴를 이미지로 대체해서 사용하니 일일이 귀찮아서

메뉴는 텍스트로 유지하면서 배경만 활용해보았습니다.

해보니 괜찬아서 저처럼 생초보님들께는 좋은팁일것 같아서 올려봅니다.

기본 XE공식레이아웃에서는 이미지 가로 189 세로 30크기가 적당합니다.

일반메뉴시

롤오버/클릭시 이미지

적당한 위치에 알아서 업로드 해세요. 아래 소스수정은 제 이미지 경로에 맞춘거에요.

소스 수정은 layouts/xe_official/css/white.css

(* 본인레이아웃과 칼라셋트에 맞는 css를 수정하셔야합니다.)

#lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;}
#lnb li { list-style:none; padding-bottom:4px;}
#lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #e8e8e8; background:url(files/faceOff/050/images/yun.png) no-repeat; color:#3e3e3e;position:relative; z-index:99; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus { color:#ffffff; background:#de4332; border:1px solid #de4332;background:url(files/faceOff/050/images/yun2.png) no-repeat;}
#lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;background:url(files/faceOff/050/images/yun2.png) no-repeat;}

첫번째 백그라운드는 일반보일때

두번째,세번째는 마우스오버시,클릭되었을때 배경입니다.

완성되었을때 메뉴~

제가 XE를 공부하면서 생초보라 생초보입장에서 하나하나 알아갈때 필요하다 싶을때

하나씩 올려볼게요.

너무 원초적팁이라 싼티나보이게 되는건 아닌지 걱정입니다.