[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






  1. 모바일에서 위와같이 안보여요ㅠㅠ

    가로 너비를 줄이면 변하긴하지만
    우클릭 검사기능써서 모바일로 변환할때에는 위처럼 안뜨는 것 같아요ㅠㅠ
    • 2020.06.09 09:22 신고 [Edit/Del]
      해당 포스팅은 파이어폭스에서만 테스트를 진행한거라.
      크롬에서 그러시는건지 제가 다시한번 테스트를 하고 포스팅 수정하겠습니다.

      답답하시다면 일단
      https://wikibook.co.kr/modern-web-design-book/
      에서 예제코드중에 관련 내용이 있으니
      한번 찾아보시는것도 도움이 될것 같아요

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기