[CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기[CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기

Posted at 2018. 4. 4. 11:12 | Posted in CSS
반응형




참고 : 모던 웹사이트 다지인의 정석



■ 내비게이션 메뉴를 토글 형태로




반응형 웹 제작중 컴퓨터에서 보여지는 메뉴를 모바일에 맞춘다는것은 쉬운일이 아니다.

이경우 완전히 UI 디자인을 다시 짜는경우가 많기에 화면 사이즈를 감지하고

화면 크기에 맞는 메뉴, 카테고리로 알맞게 화면에 띄워보자.




# 소스코드

<html>
<head>
<title>:: 화면크기에따른 메뉴 UI 변경 ::</title>
<style type="text/css">
.menuNav li a:hover {
    border-radius:5px;
    background-color:#FF0000;
    color:#FFFFFF;
}

.menuNav ul {
    margin:0;
    padding:0;
    list-style:none;
}

.menuNav ul:after {
    content:"";
    display:block;
    clear:both;
}

.menuNav li a {
    display:block;
    padding-top:10px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:10px;
    color:#000000;
    font-size:14px;
    text-decoration:none;
}

/* ############ 767px 이하 ############ */
@media(max-width:767px) {
   
    /* 토글 버튼 */
    .menuBtn {
        padding-top:6px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:2px;
        border:1px solid #AAAAAA;
        border-radius:5px;
        background-color:#FFFFFF;
        cursor:pointer;
    }

    /* 클릭시 배경색 변경 */
    .menuBtn:hover {
        background-color:#DDDDDD;
    }
   
    /* 파란색 테두리 제거 */
    .menuBtn:focus {
        outline:none;
    }
   
    .menuBtn i {
        color:#888888;
    }
   
    /* 토글버튼 글자 숨기기 */
    .menuBtn span {
        display:inline-block;
        text-indent:-999px;
    }

    .menuNav {
        display:none;
    }
}

/* ############ 768px 이상 ############ */
@media(min-width:768px) {

    /* 토글 버튼 */
    .menuBtn {
        display:none;
    }

    /* 내비게이션 */
    .menuNav {

        /* !important는 지정한 스타일의 속성이 중요하기 때문에 변경을 막기위 해지 지정한다. */
        display:block !important;
    }

    .menuNav li {
        float:left;
        width:auto;
    }
}
</style>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".menuBtn").click(function() {

        // slideToggle은 요소의 hight 값을 조작해서 움직임을 만들어 낸다.
        // 보이면 안보이게, 안보이면 보이게 처리한다.
        jQuery(".menuNav").slideToggle();
    });
});
</script>
</head>
<body>
    <!-- 모바일 화면에서 보여질 토글 메뉴 -->
    <button type="button" class="menuBtn">
        <i><img src="icon-menu.svg" style="width:20px;height:20px;"/></i><span>MENU</span>
    </button>
   

    <!-- 내비게이션 메뉴, 창크기에 맞게 변화한다.  -->

    <nav class="menuNav" id="menuNav">
        <ul>
            <li><a href="#">안지현</a></li>
            <li><a href="#">이한글</a></li>
            <li><a href="#">박기량</a></li>
            <li><a href="#">김맑음</a></li>
            <li><a href="#">조연주</a></li>
            <li><a href="#">이나경</a></li>
            <li><a href="#">서현숙</a></li>
        </ul>
    </nav>
</body>
</html>




# 출력결과 - Mobile Web




# 출력결과 - Computer Web






반응형
저작자표시

'CSS' 카테고리의 다른 글

[CSS] 자식선택자를 사용하여 특정 요소에만 효과 적용하기  (0) 2018.04.09
//

[PHP] 모바일 접속 여부 체크방법[PHP] 모바일 접속 여부 체크방법

Posted at 2018. 3. 29. 18:43 | Posted in PHP
반응형




참고 : http://esajin.kr/291




■ HTTP_USER_AGENT를 사용한 디바이스 확인




-. $_SERVER['HTTP_USER_AGENT']는 사용자의 웹 접속환경에 관한 정보를 담고있는 전역변수이다.

-. 사용자가 데스크탑으로 접속하였는지 모바일로 접속하였는지 확인을 위해 쓰일 수 있다.



# 소스코드 - 어떤 디바이스를 통해서 접근했는지를 파악할 mobile_check.php

<?php

class module {

function mobileConcertCheck() {


            $mobileArray = array(
                  "iphone"
                , "lgtelecom"
                , "skt"
                , "mobile"
                , "samsung"
                , "nokia"
                , "blackberry"
                , "android"
                , "sony"
                , "phone"
            );


$checkCount = 0;

for($num = 0; $num < sizeof($mobileArray); $num++) {

if(preg_match("/$mobileArray[$num]/", strtolower($_SERVER['HTTP_USER_AGENT']))) {

                                        $checkCount++;

                                        break;

                        }

}


return ($checkCount >= 1) ? "mobile" : "computer";

}

}

?>




# 소스코드 - 접속 결과를 나타낼 screen_change.php

<?php

include "./mobile_check.php";

$obj = new module();


if($obj -> mobileConcertCheck() == "mobile") {

echo "현재 보고계신 화면은 모바일 입니다.";

} else {

echo "현재 보고계신 화면은 컴퓨터 입니다.";

}

?>





# 출력결과






반응형
저작자표시

'PHP' 카테고리의 다른 글

[PHP] PHPExcel 서식 변경하기  (2) 2018.08.29
[PHP] 변수에 달러 기호가 삽입되는경우  (0) 2018.08.10
[PHP] DB 입출력시 따옴표( ' )를 처리방법  (0) 2018.04.06
[PHP] PDO 사용법 정리  (7) 2018.03.27
[PHP] ERROR : unterminated string literal  (0) 2018.03.19
//

티스토리툴바