참고 : 모던 웹사이트 다지인의 정석
■ 내비게이션 메뉴를 토글 형태로
반응형 웹 제작중 컴퓨터에서 보여지는 메뉴를 모바일에 맞춘다는것은 쉬운일이 아니다.
이경우 완전히 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
