카페24 쇼핑몰 만들기 #10. "좌측 메뉴" 롤오버 이미지로 교체

좌측 메뉴 변경은 관리자페이지에서
디자인 변경 작업을 하겠습니다.

[ ▼ 하단 유튜브 영상으로 상세 설명! ]

---

 

이번에, 변경 할 내용은 좌측 메뉴
"텍스트 메뉴" → "롤오버 이미지 메뉴"
로 변경하는 것입니다.

 

 

 

변경에 앞서, 포토샵에서
좌측 메뉴 작업을 미리 해두어야 합니다.

 

 

 

포토샵에서 가이드 라인을 그어 놓고
각 메뉴별 롤오버 전/후 이미지를 조각파일로 작업합니다.

 

 

 

이미지 작업을 완료 후
2. 관리자 페이지로 접속 후 "디자인관리" 클릭
3. "쇼핑몰 디자인 수정"을 클릭합니다.

 

 

 

4. 디자인 수정화면에서 좌측 메뉴 부분에
마우스를 근처로 가져갑니다.

 

 

 

5. 해당 부분에 "편집"을 클릭합니다.

 

 

 

6. "속 성" 탭을 클릭 후
각 메뉴별로 메뉴 이미지를
"사용함"으로 변경 체크합니다.

 

 

 

7. "찾아보기" 를 클릭해서
기본이미지와 롤오버이미지를 선택합니다.

 

 

 

9. 첫 번째메뉴인 "웹디자인"이 변경이 되었습니다.
나머지 모든 메뉴도 동일하게 이미지를 등록해서
왼쪽 상단에 "저장"을 클릭해야지 변경이 됩니다.

 

 

 

10. 내 쇼핑몰을 열어서 새로 고침 확인합니다.
그런데, 결과가 이상합니다.
메뉴 사이 사이에 공간(padding)이 있습니다;;
그 이유는?
기본 셋팅된 css파일에 padding이 적용되어 있기 때문입니다.

 

 

 

padding 문제 해결법

---

문제가 되는 소스 위치입니다.

sde_design/base/css/module/layout 폴더 안에
category.css파일 때문입니다.
이 파일 4번째 줄에 padding: 12px 20px 12px 9px; 를
padding: 0 20px 0 0; 으로 변경해야 합니다.

p.s) 아래에 1/2과 2/2로 해결 단계를 정리했습니다.

 

 

 

해결 1/2단계 : FTP로 aboneu_vmenu 폴더 업로드

---

1. 파일질라를 실행 후
아래  아보느 카페에서 다운 받은 aboneu_vmenu 폴더를
원격 서버의 /sde_design/base/css/module/layout 폴더
원격 서버의 /sde_design/base/js/module/layout 폴더
2군데에 같이 업로드합니다.
(그래야 대분류 마우스 오버시 중분류 팝업이 보입니다.)

p.s) aboneu_vmenu 폴더 안에는 제가 padding부분을 수정 한
category.css 와 category.js 파일 2개가 들어있습니다.
아래 아보느 카페에서 첨부파일을 다운받으시면 됩니다.
https://cafe.naver.com/aboneu/87

카페24 쇼핑몰 만들기 #10. 좌측 메뉴 롤오버 이미지로 교체

 

 

 

2. 원격 서버로 aboneu_vmenu(세로 메뉴 소스)가 업로드 된 화면입니다.

 

 

 

해결 2/2단계 : layout.html & main.html 소스 수정하기

---

1. 에디트플러스 실행 후

/sde_design/base/layout/basic 폴더 안에 "layout.html" 을 엽니다.

155번줄 156번줄 2줄의 내용을

<!--@css(/css/module/layout/category.css)-->
<!--@js(/js/module/layout/category.js)-->

 

아래 두 줄로 변경합니다.
<!--@css(/css/module/layout/aboneu_vmenu/category.css)-->
<!--@js(/js/module/layout/aboneu_vmenu/category.js)-->

 

 

 

2. 에디트플러스 실행 후

/sde_design/base/layout/basic 폴더 안에 "main.html" 을 엽니다.

155번줄 156번줄 2줄의 내용을
<!--@css(/css/module/layout/category.css)-->
<!--@js(/js/module/layout/category.js)-->

아래 두 줄로 변경합니다.
<!--@css(/css/module/layout/aboneu_vmenu/category.css)-->
<!--@js(/js/module/layout/aboneu_vmenu/category.js)-->

 

 

 

padding 해결 된 좌측 메뉴 화면 완성!

---

 

 

---

※ 유튜브 영상으로 보기

유튜브 구독하기 : https://www.youtube.com/channel/UCcUay1K9SPKkM0NswclTl0Q?sub_confirmation=1
아래 영상 url : https://youtu.be/Eadal9b8kB8