스마트폰에서 트리거(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
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]
