브라우저 제목

결과보기

추가 플러그인 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>

제목 날짜
탭-collapsible 및 구글맵을 이용한 현재 위치 찾기 file 2018.02.04
패널을 이용한 메뉴와 그리드 file 2018.02.01
갤러리화면을 만들기 위한 fotorama 플러그인 file 2018.01.31
index ui구성2 file 2018.01.30
index의 ui구성 file 2018.01.29
여러 페이지를 이용하여 화면 구성 file 2018.01.28
한 페이지에 여러화면을 구성 file 2018.01.28
jquey mobile 테마정하기 file 2018.01.28
기본 페이지 작성 file 2018.01.28
phonegap을 사용하기 위한 준비 작업 file 2018.01.24
태그 목록