스마트폰에서 트리거(trigger)를 사용해 필요할 때만 메뉴를 표시

트리거(trigger) : 누가 보더라도 '이 부분을 터치하면 메뉴가 나오겠구나'라고 생각할 수 있는 텍스트나 아이콘

 

1. 뷰포트 지정

  • 모바일 화면에서도 알맞은 크기로 표시될 수 있도록 뷰포트를 설정하는 메타 태그를 꼭 추가해야 한다.
<title>반응형 내비게이션</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 

2. 기본 CSS 지정

  • 가장 먼저 어떤 화면 크기에서도 똑같이 적용되는 기본 스타일을 정의
<style>
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
   }
   
 body {
    background:url('windmill.jpg') no-repeat right bottom fixed;
    background-size:cover;
 }
 
 a:link, a:hover, a:visited {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0 #283744;
 }
 </style>

 

3. 내비게이션 만드는 마크업 추가

<body>
    <nav>
    	<ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">WEB</a></li>
            <li><a href="#">DESIGN</a></li>
            <li><a href="#">MAP</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
        <a href="#" id="trigfger">MENU</a>
    </nav>
</body>
  • 마지막 MENU 항목은 실제 메뉴가 아니라 스마트폰 화면에서 터치할 수 있는 트리거 항목임.

4. 작은 화면의 기본 구조와 CSS

  • 다음 소스를 </style> 태그 앞에 추가
nav {
    width: 100%;
    height: auto;
    background: #34495e;
    font-size: 1.2em;
    font-weight: bold;
    position: relative;
}

nav ul {
    display: none;
    height: auto;
}

nav ul li {
    display: block;
    width: 100%;
    text-align:center;
    border-bottom: 1px solid #576979;
}

nav ul li a {
    line-height: 50px;
}

</style>

 

5. 작은 화면에서는 MENU 텍스트와 햄버거 메뉴를 같이 사용. #trigger 요소를 화면에 표시하고, 오른쪽에 nav.png를 함께 표시

nav a#trigger {
    display: block;
    background-color: @283744;
    width: 100%;
    padding-left: 15px;
    line-height: 40px;
    position: relative;
}

nav a#trigger::after {
    contnet:"";
    background: url("nav.png") no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}

</style>

 

6. 트리거를 터치하면 메뉴가 나타났다가 한 번 더 터치하면 메뉴가 사라지는 부분. jQuery의 slideToggle() 메서드를 사용. 다음 소스를 </body> 앞에 삽입

<script src="js/query-2.2.4.min.js"></script>

<script>
    $(function() {
        var trigfer = $('#trigger');
        var menu = $('nav ul');
        $(trigger).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        }); 
        
        $(window).resize(function() {
            var w = $(window).width();
            if (w>320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
   
</script>

</body>

 

7. 미디어 쿼리 중단점 정하기

큰 화면일 경우 화면 위쪽에 내비게이션 바를 표시하고 메뉴 항목을 가로로 표시하려고 할 경우

@media screen and (min-width:721px) {

    nav {
        height: 40px;
        border-bottom: 2px solid #34495e;
    }
    
    nav ul {
        display: block;
        width: 720px;
        height: 40px;
        padding: 0;
        margin: 0 auto;
    }
    
    nav ul li {
        display: inline-block;
        width: 120px;
        border-bottom: 0;
        border-right: 1px solid #576979;
        margin-right: -6px;
    }
    
    nav ul li:last-child {
        border-right: 0;
    }
    
    nav ul li a {
        font-size: 1em;
        line-height: 40px;
    }
    
    nav a#trigger {
        display: none;
    }

}

</style>

 

 

[출처: 프런트엔드 웹 디자인 입문 p.119~p.124]

+ Recent posts

티스토리툴바