웹마스터 팁
[생초보팁] 서브메뉴 배경이미지 활용하기
2010.11.24 23:28
서브메뉴를 이미지로 대체해서 사용하니 일일이 귀찮아서
메뉴는 텍스트로 유지하면서 배경만 활용해보았습니다.
해보니 괜찬아서 저처럼 생초보님들께는 좋은팁일것 같아서 올려봅니다.
기본 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를 공부하면서 생초보라 생초보입장에서 하나하나 알아갈때 필요하다 싶을때
하나씩 올려볼게요.
너무 원초적팁이라 싼티나보이게 되는건 아닌지 걱정입니다.
댓글 4
제목 | 글쓴이 | 날짜 |
---|---|---|
[생초보팁] 서브메뉴 배경이미지 활용하기
[4]
![]() | 에혀라X | 2010.11.24 |
개인 홈페이지에서 아주 손쉽게 배경음악을 깔아놓는 법 [5] | 지녁 | 2010.11.25 |
텍스타일 (Textyle) 에서 첨부파일 용량 제한 늘리는 방법. [1] | sejin7940 | 2010.11.27 |
게시물 하단에 예쁜 추천,비추천 아이콘 버튼 추가하기~
[12]
![]() | xemall | 2010.11.28 |
최근문서 or 콘텐츠 위젯 공지글 뽑아오기 [8] | Xiso | 2010.11.29 |
[생초보팁] 페이지 내용 줄간격 css | 에혀라X | 2010.11.30 |
호스팅비 돈아낍시다. 하나의 XE 다중 도메인 사용하기. [10] | kimnada | 2010.12.02 |
[생초보팁] 회원가입시 홈페이지 블로그주소 않나타내기 ㅋ [4] | 에혀라X | 2010.12.05 |
새로운 채팅 서비스 웹톡!
[3]
![]() | 명랑폐인™ | 2010.12.06 |
어느게시판이든 모두 적용이 가능한 그림판입니다.^^ [1] | web | 2010.12.07 |
ftp나 mysql 암호 변경시 일어나는 ''db 접속시 에러' XE | 샷타이거 | 2010.12.08 |
플래시로 만들어진 글자 타이핑보고 만들었어요. | web | 2010.12.09 |
사이트 모니터링 알리미에요...^^
[3]
![]() | web | 2010.12.10 |
[생초보팁] 페이지(page) 줄간격과 부분 웹폰트 | 에혀라X | 2010.12.11 |
[생초보팁] 웹진최근게시물 요약글 링크걸기
[1]
![]() | 에혀라X | 2010.12.12 |
[생초보팁] 레이아웃 수정시 HTML 넣는 칸 넓히기 -_- | 에혀라X | 2010.12.12 |
메인화면에 설문조사 위젯(?) 만들기
[3]
![]() | 3D매니아 | 2010.12.14 |
1.4.2.3 에서 1.4.3 이상 버전으로 업그레이드 시 백지화면 해결팁 [4] | 2년후 | 2010.12.15 |
외부페이지를 레이아웃에 결합시 상단 마진폭이 벌어지는 문제 해결방법
[6]
![]() | DuRi | 2010.12.17 |
심플한 XML 플래시 이미지 갤러리
[7]
![]() | maxtabby | 2010.12.21 |