모바일 사이트에서는 왼쪽 상단 삼선 이미지를 클릭 시
사이드 메뉴를 노출하게 됩니다.
제이쿼리 플러그인 중에는 정말 유용한 자료가 많은 듯해요.
사용법도 무지 쉬운 모바일 사이드 메뉴 만드는 플러그인
아래 사이트 방문하시면 플러그인과 예제 파일을 다운로드 할 수 있습니다.
http://mmenu.frebsite.nl/
아래 주소를 클릭 하시면
사용법에 대한 설명을 볼 수 있어요
http://mmenu.frebsite.nl/documentation/api.html
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu({
// options
});
var api = $("#my-menu").data( "mmenu" );
api.bind( "openPanel", function( $panel ) {
console.log( "This panel is now opened:" + $panel.attr( "id" ) );
});
api.openPanel( $("#my-panel") );
});
</script>아래는 전체소스 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="../dist/js/jquery.mmenu.all.min.js"></script>
<script type="text/javascript">
$(function() {
$('nav#menu').mmenu({
extensions : [ 'effect-slide-menu', 'pageshadow' ],
searchfield : true,
counters : true,
navbar : {
title : 'Advanced menu'
},
navbars : [
{
position : 'top',
content : [ 'searchfield' ]
}, {
position : 'top',
content : [
'prev',
'title',
'close'
]
}, {
position : 'bottom',
content : [
'<a href="http://mmenu.frebsite.nl/wordpress-plugin.html" target="_blank">WordPress plugin</a>'
]
}
]
});
});
</script>
</head>
<body>
<div id="page">
<div class="header">
<a href="#menu"></a>
Demo
</div>
<div class="content">
<p><strong>This is an advanced demo.</strong><br />
Click the menu icon to open the menu.</p>
<p>For more demos, a tutorial, documentation and support, please visit <a href="http://mmenu.frebsite.nl" target="_blank">mmenu.frebsite.nl</a></p>
</div>
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About us</a>
<ul>
<li><a href="#about/history">History</a></li>
<li><a href="#about/team">The team</a>
<ul>
<li><a href="#about/team/management">Management</a></li>
<li><a href="#about/team/sales">Sales</a></li>
<li><a href="#about/team/development">Development</a></li>
</ul>
</li>
<li><a href="#about/address">Our address</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
'IT > 제이쿼리' 카테고리의 다른 글
| snap.js 모바일 사이드 슬라이드 메뉴 (0) | 2016.05.26 |
|---|---|
| 모바일 네비게이션 슬라이드 sly.min.js (0) | 2016.05.26 |
| bpopup 팝업 닫기 사용법 (0) | 2016.02.25 |
| 자바스크립트 시작페이지 즐겨찾기 (0) | 2016.02.14 |
| 자바스크립트 날짜 Date 제이쿼리날짜 (0) | 2016.01.29 |