웹마스터 팁

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

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

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

 

기본 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를 공부하면서 생초보라 생초보입장에서 하나하나 알아갈때 필요하다 싶을때

하나씩 올려볼게요.

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

 

제목 글쓴이 날짜
XE 1.2.1에서 xe_default 게시판 스킨 사용시 IE에서 글입력폼이 안보일 때 [2] 현의느낌 2009.04.28
글읽기에서 글쓴이의 닉네임을 이름으로 변경하기 하얀마법 2010.10.29
zbXE에 퍼머링크 달기 [3] file 라르게덴 2008.03.13
숫자 아이디 사용법 [6] Slick 2008.01.10
리눅스에서 제로보드 xe를 위한 환경 구축하기 [6] 써니a 2007.08.18
메인 페이지 수정이 안되는 경우 file nurungso 2010.11.07
새로운 채팅 서비스 웹톡! [3] file 명랑폐인™ 2010.12.06
어느게시판이든 모두 적용이 가능한 그림판입니다.^^ [1] web 2010.12.07
[허접팁] 파일첨부가 안됩니다 [1] 클럽다이 2009.05.23
클릭마다 조회수 올리기 [1.4.0] [12] file 지B 2009.04.04
레이아웃 편집, 게시판 상/하단 내용에 위젯 스타일 적용하기 [2] LutZ 2010.09.12
새글 (댓글) 작성후 자동으로 이메일 보내질때 작성자 서명을 붙이는법 [1] 왕초봉 2010.04.10
외부프로그램에서 제로보드 xe 및 그누보드 회원 연동(로그인) 하기 - 초간단 [1] 한이73 2010.02.03
[생초보팁] 페이지 내용 줄간격 css 에혀라X 2010.11.30
파일 첨부할때 HTTP Error 메세지 창이 뜨면서 첨부되지 않을때 해결방법 [1] file DuRi 2010.11.22
개인 홈페이지에서 아주 손쉽게 배경음악을 깔아놓는 법 [5] 지녁 2010.11.25
[생초보팁] 서브메뉴 배경이미지 활용하기 [4] file 에혀라X 2010.11.24
XE 일일이 메뉴출력하지 말고 XE함수들로 한번에 처리하세요! [1] 소렌트. 2010.04.11
xe 파일첨부 시 증발하는 현상 해결 팁 [5] iwishiwas.idtail.com 2009.07.28
제로보드에서 아이프레임(iframe) 높이 자동조절(파폭,IE, 모두 작동) [10] HaruKaze 2009.03.17