추가 플러그인 bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
html
패널 부분은 page 밖에 만들어 주셔야 합니다.
<div data-role="panel" id="menuPanel" data-position="left" data-display="overlay">
패널 내용
<a href="#" data-rel="close" class=" btn-close" >X</a>
<div class="row">
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
<div class="col-xs-3"><a href="#">메뉴1</a></div>
</div>
<div class="logo"><img src="img/logo1.png"></div>
<div class="ui-grid-b small-g" >
<div class="ui-block-a"><a href="#"><img src="img/food1.jpg"></a></div>
<div class="ui-block-b"><a href="#"><img src="img/food2.jpg"></a></div>
<div class="ui-block-c"><a href="#"><img src="img/food3.jpg"></a></div>
<div class="ui-block-a"><a href="#"><img src="img/food4.jpg"></a></div>
<div class="ui-block-b"><a href="#"><img src="img/food5.jpg"></a></div>
<div class="ui-block-c"><a href="#"><img src="img/food6.jpg"></a></div>
</div>
<!-- panel content goes here
data-display="push"
data-display="overlay"
data-display="reveal"
-->
</div><!-- /panel -->
링크부분(패널을 열개하는 메뉴버튼)을 header에 추가했습니다
<div id="menu"><a href="#menuPanel"><i class="fa fa-align-justify"></i></a></div>
css부분
/* 패널 */
#menu{position:absolute; top:20px; left:20px; width:50px; height:40px; border:1px solid black; padding-left:5px; padding-top:2px; }
#menu i{font-size:2.5em;}
#menuPanel{background:pink; }
.ui-panel-display-reveal{box-shadow:none;}
.btn-close{position:absolute; top:10px; right:10px; text-decoration:none;
padding:5px 10px; border:1px solid black;
}
/* 그리드 */
.row{width:90%; margin:auto; padding:0; margin-top:50px;}
.col-xs-3{margin:0; padding:0; border:1px solid black; text-align:center; background:white}
.logo{width:100%; text-align:center; margin-top:50px;}
.small-g{width:90%; margin:auto;}
.small-g img{width:100%;}
.ui-block-a,.ui-block-b, .ui-block-c{padding:3px; box-sizing:border-box;}
/* gallery_img */
#gallery_img>#footer{height:auto;}
js
<script id="panel-init">
$(function() {
$( "body>[data-role='panel']" ).panel();
});
</script>