묻고답하기

캡처.JPG



위의 메뉴를 모바일에서 좌측으로 슬라이드해서 빼는 형식으로 만들려고 합니다.


모바일용 템플릿은 따로 만드는데 성공했는데,


http://martian36.tistory.com/523 를 참조해서 하려 해도 잘 되지 않습니다.


<style type="text/css">
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { float:left; position:relative; width:40px; height:30px; background:url(button1.gif); text-indent:-9999px; cursor:pointer;}
		#effect { width: 500px; height: 135px;  position: fixed;  left:-200px; top:45%;}
		#content { width:195px; float:left; font: 28px/1.6 NanumBrushWeb; }

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(function() {
		jQuery( "#button" ).toggle(
			function() {
				jQuery( "#effect" ).animate({left: 0}, 500 );
				jQuery( "#button" ).css({"background":"url(button2.gif)"});
			},
			function() {
				jQuery( "#effect" ).animate({left: '-200px'}, 500 );
				jQuery( "#button" ).css({"background":"url(button1.gif)"});
			}
		);
	});
</script> 


위 코드를 m.main.header.tpl 에

m.main.header.tpl


<div id="effect">

   <div id="content">

메뉴부분

</div>

<div id="button">

<p><a href="#">Toggle</a></p>

</div>


</div>


이런식으로 처리를 했습니다.




이 메뉴부분은 두곳에서 처리를 할 수 있어서 한번씩 해봤습니다.


m.main.navigation.tpl 가 직접적으로 메뉴를 담당하는 부분이고,

m.main.navigation.tpl


m.layout.full.tpl 가 레이아웃의 역할로써 레이아웃에 필요한 tpl파일들을 부릅니다.

m.layout.full.tpl


대체로 맞게 한거같은데 뭘 잘못한거지 모르겠습니다.


class명이 겹쳐서 button, effect, content 앞에


m-button, m-effect, m-content 식으로 붙였습니다.


그렇게 했더니 막 메뉴가 데칼코마니 마냥 여러번 펼쳐져서 나오고, 슬라이드 메뉴는 제대로 되도않고, 버튼도 나오지 않네요 ;ㅅ;


왜그럴까요?



------------------

참조 사이트 및 첨부파일

http://martian36.tistory.com/523

m.main.header.tpl  (수정전 파일입니다)

m.layout.full.tpl       (수정전 파일입니다)

m.main.navigation.tpl  (수정전 파일입니다)


slideleft2.html

티스토리 주인장님이 슬라이드 메뉴 html로 만든것을 보고 참조했습니다.


글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
qwms 모바일 페이지에서 좌측 메뉴를 슬라이드로 열려고 합니다. [7] file 2014.10.11 by qwms
forman php 에러 [1] 2014.10.11 by GG
qweruiop Parse error: syntax error문제! 도와주세요 ㅠㅠ [1] file 2014.10.11 by qweruiop
SeungXE 복권 모듈 수정된 버전 가지고 계신 분 계신가요?  
lifeto gaussian blur 효과 css3 [3] 2014.10.11 by SeungXE
sam95 동영상 팝창 위젯 있나요? [1] 2014.10.11 by SeungXE
쑤유 admin 페이지가 안 열리는데 회원가입 차단 어떻게 하죠? [2] 2014.10.11 by 쑤유
oscarmike 중국 IP 어떻게 차단할 수 있을까요? [2] 2014.10.11 by Double'U'
몰몰 스케치북 유튜브 게시판 질문드립니다. [2] file 2014.10.11 by sdkfj24
무실 XE 코어 업그레이드 후 관리자 페이지에 나온 스케치북 게시판도 업그레이드를 하니 관리자가 댓글을 쓸 수 없게 된 것 같습니다. [2] 2014.10.11 by 무실
unfade 홈페이지 카운터가 아예 작동하지 않습니다. [2] 2014.10.11 by unfade
쑤유 phpMyadmin 에서 코멘트 지우려면 뭘 지우면 되나요? [5] 2014.10.11 by 쑤유
소2222 xe 관리자 비밀번호 오류,,, [2] 2014.10.11 by 소2222
씨디맨 모바일에서 동영상이 안나오네요. [1] 2014.10.10 by 공수래
호이쨔아 css div태그 수정 문의좀드립니다 [2] 2014.10.10 by 호이쨔아
무실 스케치북 게시판 업그레이드 후 댓글 수 색깔이 까맣게 되었습니다. [5] 2014.10.10 by 무실
DDuBBa 링크된 주소를 바꾸려는데요..  
광땽 인덱스 페이지가 충돌합니다.ㅠㅠ [2] 2014.10.10 by 광땽
공수래 iframe 질문 드려요. [2] 2014.10.10 by 공수래
Harry 게시판 추천즘 부탁드립니다.  
엡뽀 링크 노출 관련 [1] 2014.10.10 by Double'U'
수퍼 본문 썸네일 클릭하면 원본사진보기 [3] file 2014.10.10 by 수퍼
닥터헬프 1.7,7,1 에서 포인트가 없어도 글이 읽어지네요 file  
오늘은삽질왕 사이트 이전을 했는데... 초기화면 띄울려면 어디를 손봐야 할까요? [1] 2014.10.10 by sejin7940
올트레기 로그인 세션 유지 시간 문의  
김형진354 다른게시판에서 긁어오기 식으로 게시글을 올리는데 썸네일이 나오지않습니다 [1] 2014.10.10 by 모해
언덕 Core 서버 배포판은 어디서 받아요? [4] 2014.10.10 by 언덕
오늘은삽질왕 사이트 이전을 위해 백업진행하는데 다음과 같이 에러뜹니다. 조언부탁드립니다. [2] 2014.10.10 by 오늘은삽질왕
브랜든a 구글,네이버등 게시글만 노출 하는법  
sam95 비메오 동영상게시판 구합니다.