웹마스터 팁
[생초보팁] 서브메뉴 배경이미지 활용하기
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
-
ForHanbi
2010.11.25 09:38
-
drimilda
2010.11.25 17:39
아 감사합니다.^^
이미지까지... 근데 막상 css를 열어보니 내껀 왜 이리 복잡하지요??? 헐....
위의 메뉴처럼 교체하고 싶은데 css 소스가 넘 복잡해 어찌 손을 대야하는지 암담하네요....
괜찮으시다면 조언좀 구합니다. ㅡㅡ;;
/* left Column Sub menu */
#leftSubm { position:relative; float:left; _float:none; width:182px; padding:0px; margin:0px 0px 8px 0px; _margin:0px 0px 1px 0px; }
#leftSubm .submTitle { float:left; _float:none; height:23px; width:182px; padding:8px 0px 0px 20px; margin:0px; }
#leftSubm .submTitle a { color:#0d04cd; font-size:13px; padding:9px 0px 0px 30px; margin:0px; background:url(../images/bgicons/leftmenuList1.gif) no-repeat 10px 7px; }
#leftSubm .submTitle a:hover { color:#e90505; }
#leftSubm .submBottom { float:left; _float:none; height:5px; width:182px; padding:0px; margin:0px; }#leftSubm .lsm { float:left; top:0px; width:182px; padding:0px 2px; margin:0px; }
#leftSubm .lsm li {list-style:none; padding:0px 3px 0px 2px; margin:0px; }
#leftSubm .lsm li a {position:relative; display:block; width:151px; padding:5px 5px 5px 18px; border-bottom:1px solid #eeeeee; background:url(../images/bgicons/leftmenuList2.gif) no-repeat 7px 5px; color:#555555; text-decoration:none;}
#leftSubm .lsm li a:hover,
#leftSubm .lsm li a:focus {color:#0063FF; font-weight:bold; background:#dcddda url(../images/bgicons/leftMenuListOnL.gif) no-repeat 3px 5px;}
#leftSubm .lsm li.on a {background:#f3f1e9 url(../images/bgicons/leftMenuListOnL.gif) no-repeat 2px 5px; color:#3a66a2; }
#leftSubm .lsm li.on a:hover,
#leftSubm .lsm li.on a:focus { font-weight:bold;}
#leftSubm .lsm li ul { display:block; position:relative; left:8px; width:165px; padding:0px; margin:0px; overflow:hidden;}
#leftSubm .lsm li ul li { position:relative; top:-1px; padding:0; margin:0px; }
#leftSubm .lsm li ul li a { padding:7px 5px 5px 17px; width:145px; color:#818181; font-weight:normal; letter-spacing:normal; background:url(../images/bgicons/leftmenuList3.gif) no-repeat 6px 7px; }
#leftSubm .lsm li ul li a:hover,
#leftSubm .lsm li ul li a:focus { color:#de4332; font-weight:normal; padding:7px 5px 5px 17px; background:#f8f4c2 url(../images/bgicons/leftMenuListOnS.gif) no-repeat 2px 7px; }
#leftSubm .lsm li.on ul { display:block; }
#leftSubm .lsm li.on ul li { background:#FFF; }
#leftSubm .lsm li.on ul li a { padding:7px 5px 5px 17px; background:url(../images/bgicons/leftmenuList3.gif) no-repeat 6px 7px; }
#leftSubm .lsm li.on ul li a:hover,
#leftSubm .lsm li.on ul li a:focus { padding:7px 5px 5px 17px; background:#f8f4c2 url(../images/bgicons/leftMenuListOnS.gif) no-repeat 2px 7px; }
#leftSubm .lsm li.on ul li.on a { color:#3163FF; font-weight:normal; padding:7px 5px 5px 17px; background:#FFF68F url(../images/bgicons/leftMenuListOnS.gif) no-repeat 2px 7px; }
#leftSubm .lsm li.on ul li.on a:hover,
#leftSubm .lsm li.on ul li.on a:focus { color:#3163FF; font-weight:bold; }대체 왜 이렇게 복잡하지요??? 헐....
-
에혀라X
2010.11.25 21:20
제가 보기엔 공식레이아웃이 아니고 다른 레이아웃소스인가보네요.
일단 공통점을 봐서 제가 수정해본다면 아래와 같습니다.
혹시모르니 원본소스는 항상 따로 보관해두시고 테스트 해보세요.
다른건없고 백그라운드 시작 위치값을 삭제하면되겠네요.
*수정전*
#leftSubm .lsm li a {position:relative; display:block; width:151px; padding:5px 5px 5px 18px; border-bottom:1px solid #eeeeee; background:url(../images/bgicons/leftmenuList2.gif) no-repeat 7px 5px; color:#555555; text-decoration:none;}
#leftSubm .lsm li a:hover,
#leftSubm .lsm li a:focus {color:#0063FF; font-weight:bold; background:#dcddda url(../images/bgicons/leftMenuListOnL.gif) no-repeat 3px 5px;}
#leftSubm .lsm li.on a {background:#f3f1e9 url(../images/bgicons/leftMenuListOnL.gif) no-repeat 2px 5px; color:#3a66a2; }
*수정후*
#leftSubm .lsm li a {position:relative; display:block; width:151px; padding:5px 5px 5px 18px; border-bottom:1px solid #eeeeee; background:url(../images/bgicons/leftmenuList2.gif) no-repeat;color:#555555; text-decoration:none;}
#leftSubm .lsm li a:hover,
#leftSubm .lsm li a:focus {color:#0063FF; font-weight:bold; background:#dcddda url(../images/bgicons/leftMenuListOnL.gif) no-repeat;}
#leftSubm .lsm li.on a {background:#f3f1e9 url(../images/bgicons/leftMenuListOnL.gif) no-repeat; color:#3a66a2; } -
drimilda
2010.11.26 22:04
아~~ 감사합니다.어제 오늘 바빠 이제야 봤네요.
바로 적용했고 아주 잘 됩니다.^^ ~~
번거롭게해드려 죄송스럽고
하나하나 꼼꼼히 지적해 주셔서 너무 감사합니다.^^ 복받으세요~~
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| XE 1.2.1에서 xe_default 게시판 스킨 사용시 IE에서 글입력폼이 안보일 때 [2] | 현의느낌 | 2009.04.28 |
| 글읽기에서 글쓴이의 닉네임을 이름으로 변경하기 | 하얀마법 | 2010.10.29 |
zbXE에 퍼머링크 달기
[3]
 | 라르게덴 | 2008.03.13 |
| 숫자 아이디 사용법 [6] | Slick | 2008.01.10 |
| 리눅스에서 제로보드 xe를 위한 환경 구축하기 [6] | 써니a | 2007.08.18 |
|
메인 페이지 수정이 안되는 경우
| nurungso | 2010.11.07 |
|
새로운 채팅 서비스 웹톡!
[3]
| 명랑폐인™ | 2010.12.06 |
| 어느게시판이든 모두 적용이 가능한 그림판입니다.^^ [1] | web | 2010.12.07 |
| [허접팁] 파일첨부가 안됩니다 [1] | 클럽다이 | 2009.05.23 |
|
클릭마다 조회수 올리기 [1.4.0]
[12]
| 지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]
| DuRi | 2010.11.22 |
| 개인 홈페이지에서 아주 손쉽게 배경음악을 깔아놓는 법 [5] | 지녁 | 2010.11.25 |
|
[생초보팁] 서브메뉴 배경이미지 활용하기
[4]
| 에혀라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 |
3번째는 지금 페이지를 말해주는 걸 겁니다.
이 페이지의 메뉴에 community의 색만 바뀌어 있는거랑 같은거죠.