쇼핑몰 메뉴 부분을 이미지로 만들려 합니다
- - 짧은주소 : http://e3net.fineyes.com/bbs/?t=Lu
본문
모바일은 그대로 두고 pc형에 대해서 메뉴를 이미지화 하려고 합니다
아무래도 다음 소스를 변경해야 하는데
탬플릿 형태인데 이해가 잘 안되는 부분이 있어서 아시는 분들이 있을까 질문 드려 봅니다
<!--{* Menu *}-->
<!--{@ menu}--> ----> 루프의 시작
<li class="{? .active}active{/} dropdown"> ----> 1) 조건문인데 .active가 있다면이 되는것 같네요 헌데 값이 어떻게 들어올지 모르겠네요
그리고 active{/}가 어떤 동작을 요구하는지도 감을 못잡고 있네요
<a href="{.href}" class="dropdown-toggle" {? C.G5_IS_MOBILE}data-toggle="dropdown"{:}data-hover="dropdown"{/}> ---->모바일 조건문
{.ca_name} ---> 2) 제 생각에 이 부분을 이용하면 될것 같더군요 img src를 이용해서 해당 폴더에 해당 이름과 같은 파일.jpg가 있으면
불러와 출력하게 만들면 될것 같은데 우선 테스트를 위한 출력 방법을 모르겠네요
php문을 그대로 쓸 수 있는 것이라 하여 var_dump로 출력을 해보려 했는데 죄다 실패했네요
3) 또 이 문장에서 어떻게 메뉴 글자 오른쪽의 이미지를 삭제 및 여백을 관리할 수 있는지 감도 못잡고 있습니다.
혹시나 하여 common.css에서 만져보고 있는데 변경이 적용되는 구간이 없네요
</a>
<!--{@ submenu}-->
<!--{? ..key_ == 0}-->
<ul class="dropdown-menu">
<!--{/}-->
<li {? ..active}class="active"{/}>
<a href="{..href}">{..ca_name}</a>
</li>
<!--{? ..key_ == .cnt-1}-->
</ul>
<!--{/}-->
<!--{/}-->
</li>
<!--{/}-->
<!--{* End Menu *}-->
위 1) 2) 3)번 항에 대해 혹시 방법이나 아이디어가 있으신 분이 있으시다면 공유해주시면 감사드리겠습니다.
한참 템플릿 가이드를 보면서 대체 어떻게 디버그를 위해 구문 출력을 하나 싶어 고민만 1시간 하고 글을 다시 정리하여 질문에 올려봅니다 ㅠㅠ
댓글목록 7
red123님의 댓글
- 아이디로 검색
2015.06.22 21:20respond.js에 보면 href가 선언되어 있고 sheet 배열에 넣는게 있는데
sheet.href는 어디서 값을 얻게되는 걸까요?
전체파일 검색에 안보이군요 흠...
sheets[i] = var sheets = links = head.getElementsByTagName( "link" ) 이런 사용법이 되는데
결론은.. 어렵군요
{} php 템플릿 사용법이라도 좀 알면 좋겠네요
{? .active}active{/} --> .active 값은 뭐고 active{/}는 무슨 동작일까요????
{.ca_name} 이런 것들은 도대체 어떻게 값을 찍어봐야 하나?
그리고 도대체 오른쪽 이미지는 어디서 굴러오는 걸까요? 아무리 검색해도 추적이 안되네 정말~
어렵게 생각 안했는데 점점 산으로 가네요
red123님의 댓글
- 아이디로 검색
2015.06.23 16:42답변이 없어요 ㅜㅠ 너무 슬프네요
이윰넷님의 댓글
- 아이디로 검색
2015.06.23 18:15red123님 안녕하세요.
아무도 답변을 달지 못했나 봅니다.
메뉴의 텍스트를 이미지로 변경하고 싶다는 의견을 주셨는데요.
반응형웹에서 메뉴가 이미지로 처리될 경우,
제약사항들이 많을 것 같아서 권장하지 않는 방법이라
굳이 해법을 드리지 않았는데요.
말씀하신데로
{.ca_name} 이 부분이 카테고리명 텍스트가 출력되는 곳인데요.
이 부분을 이미지로 처리하시면 됩니다.
예)
1) 1차메뉴 : 회사소개 이미지 : /eyoom/theme/basic/image/menu_001.jpg 일 경우,
{.ca_name} ===> <img src="../image/menu_{.me_code}.jpg">
2) 2차메뉴 : 회사소개 > CEO인사말 이미지 : /eyoom/theme/basic/image/menu_001002.jpg 일 경우,
{..ca_name} ===> <img src="../image/menu_{..me_code}.jpg">
위와 같은 형식으로 처리하면됩니다.
참고로 1차메뉴에는 변수에 점(.)이 하나이고, 2차메뉴에는 점(..)이 2개입니다.
이렇게 까지 고민하고 계실 줄은 전혀 몰랐습니다.
늦게 답변 드려 죄송합니다.
추가적인 문의사항이 있으시면 언제든 문의 주세요.
감사합니다.
red123님의 댓글
- 아이디로 검색
2015.06.23 19:26답변 감사드립니다
궁굼한게 두 가지 더 있어 댓글 드립니다
1) active{/} 이 함수의 동작이 무엇인지 알고 싶어요 이것도 템플릿인가요? 제가 내부 동작을 찾아보려면 어떻게 해야 하나요?
2) {}안에 있는 값을 출력해서 확인해 보려면 어떻게 해야하나요?
정말 너무 알고 싶습니다 ^^
부탁 드릴께요 ㅠㅠ
red123님의 댓글
- 아이디로 검색
2015.06.23 20:00아니면 부트스트랩처럼 강좌가 있는 곳을 알 수 있을까요?
이윰넷님의 댓글
- 아이디로 검색
2015.06.23 20:21red123님 안녕하세요.
1) <li class="{? .active}active{/} dropdown"> 이부분은 템플릿 문법인데요.
굳이 php 프로그램 형식으로 변환해 보자면 다음과 같습니다.
<li class="<?php if($menu['active']) echo 'active'; ?> dropdown">
[해석 1)]
만일 본 메뉴가 active(활성화 : 현재 웹페이지가 본 메뉴의 것이라면)라면 <li class="active dropdown"> 이 되는 것이구요.
그렇지 않고 관계가 없다면 <li class="dropdown">이 되는 거예요.
2) 템플릿 파일 내에서 <!--{}-->, {}-->, <!--{}, {} 등은 모두 동일한 의미의 템플릿 태그로서
표현하는 방식에 따라 조건문이 되기도 하고 반복문이 되기도 하며 변수값만을 가지기도 합니다.
a. 조건문 : <!--{? a==1}-->a는 1입니다<!--{:}-->a는 1이 아닙니다.<!--{/}-->
b. 반복문 : <!--{@ array_variable }-->이 부분이 반복됩니다.<!--{/}-->
요약해 둔 설명 : http://eyoom.net/page/?pid=tmlanguage 참조해 주시구요.
자세히 공부하고 싶으시다면 : http://xtac.net 를 방문하셔서 탐독하시길 권해 드립니다.
감사합니다.
red123님의 댓글
- 아이디로 검색
2015.06.23 20:22정말 너무너무 감사 드립니다 ^^ 좋은 하루 되시길 바랍니다
축하합니다. 행운의 포인트 98포인트를 획득하였습니다.