메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140811_[jquery] 왼쪽 slide menu

2014.09.23 18:12 read.75544

jq_slidemenu_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			.mbtn{position:fixed;bottom:10px;left:10px;width:50px;height:50px;background:green;color:#fff;text-align:center;line-height:50px;}
			.m{display:none;position: fixed;left:0;top:0;width:300px;height:100%;background:#1fbc02;}
			span{position: absolute;right:5px;top:5px;cursor: pointer;}
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$(".mbtn").click(function(){
					$(".m").show("slide",{direction:"left"},300,null);
				});
				$(".m > span").click(function(){
					$(".m").hide("slide",{direction:"left"},300,null);
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div class="mbtn">menu</div>
		<div class="m"><span>X</span></div>
	</body>
</html>


추가메뉴 목록
위로