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

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

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로 만든것을 보고 참조했습니다.