사용자 해상도에 맞춰서 메뉴 크기가 조절되었으면 좋겠는데
본문
.nav {background-color:#333;width:100%;height:54px;margin:0 auto; text-align:center;}
.nav div a{color:#fff;font-weight:700;}
.menu > div{display:inline-block;vertical-align:top;font-size:1.6em;margin:20px;width:20%}
.menu > div:hover > ul{display:block;}
/*서브메뉴*/
.menu > div > ul {margin-top:15px;margin-bottom:20px;background-color:#666;padding:5px;line-height:22px;display:none;}
.menu > div > ul > li > a{color:#fff;font-size:0.8em;padding:10px;}
.t_btn{display:none;}
<div class='nav'>
<div class='menu'>
<div>
<a href="#">회사소개</a>
<ul>
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</div>
<div>
<a href="#">제품소개</a>
<ul>
<li><a href="#">데코몰딩</a></li>
<li><a href="#">인테리어필름</a></li>
<li><a href="#">발포문틀</a></li>
</ul>
</div>
<div>
<a href="#">고객센터</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">문의게시판</a></li>
</ul>
</div>
<div>
<a href="#">갤러리</a>
<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>
</ul>
</div>
</div>
보시면 어느정도 크기가 차면 밑으로 내려가요
밑으로 글자가 안내려가고 한 라인안에서 해상도에 따라 조절되었으면 좋겠어요
답변 1
올리신 소스 보고 제가 새롭게 수정했습니다. 응용해서 해보세요~
해상도 768px 아래로 떨어지면 모바일 메뉴가 출동 합니다.
반응형에 기본 메뉴 레이아웃 이니까 잘 숙지해두세요!!
p.s ...
1. 가로나열은 display:inline-block 은 양쪽 끝에 여백 생겨서 큰 레이아웃 요소에는 상관없지만
메뉴에 쓰기엔 비추 입니다. 메뉴가 4개 이라 가정하고 float:left: width:25% 해야 딱 맞아 떨어집니다.
그리고 감싸고 있는 요소에 .nav ul:after { clear:both; display:block; content:""; *zoom:1}
를 해 줌으로써 float 속성을 공간 차지 없이 풀어버립니다.
*zoom:1 는 익스 5,6,7 등에 먹히게 하는 핵입니다.
2.
@media all and (max-width: 768px) { .... } // 768 이하이면 실행하라
@media all and (min-width: 768px) { .... } // 768 이하이면 실행하라
미디어쿼리는 반응형 홈페이지에 기본 입니다..참고하세요
그리고 폰트 사이즈를 rem 을 썼는데요 이유는 문서 최상단 html { font-size:14px }
이렇게 선언 해 놓으면 모든 페이지에서 사용하는 font-size:1rem 이면 14px 로 계산됩니다.
pc에서 1.5rem 해놓으면 14px 에 1.5를 곱한게 pc에서 보여지는 사이즈고 해상도가 줄어들면 자동으로 반응하여 모바일 에서 볼땐 최소 사이즈인 14px 가 됩니다.
3.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
모바일 이든 반응형 이든 필수 메타 태그 입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="subject" content="">
<meta name="keywords" content="">
<title>사이트</title>
<style>
html { font-size:14px !important; }
body { margin:0; padding:0; }
a:link, a:visited {color:#666;text-decoration:none}
ul { list-style:none; !important; padding:0; margin:0; }
.nav {background:#333;width:100%;height:50px;margin:0 auto; text-align:center;}
.nav a {color:#fff;font-weight:700;}
.nav ul:after { clear:both; display:block; content:""; *zoom:1}
.nav ul li {float:left;line-height:50px;height:50px;font-size:1.2rem;width:25%}
.nav ul li a { display:block; }
.nav ul li:hover { background:#222 }
/*서브메뉴*/
.nav ul.sub {display:none;}
.nav ul li:hover > ul.sub { display:block; text-align:center;margin:0 auto; background:#222; border-top:1px solid #333}
.nav ul.sub li {display:block !important; width:100% !important; line-height:40px !important; height:40px !important; }
.nav ul.sub li a { color:#ddd;font-size:1rem;text-align:center}
.nav ul.sub li:hover a { color:#fff; background:#333 }
.t_btn{display:none;}
.mobile_nav { display:none }
@media all and (max-width: 768px) { /* 해상도 768px 이하일 때 실행 */
.nav { display:none }
.mobile_nav { display:block; position:relative; line-height:50px;height:50px; padding:0 10px; border-bottom:1px solid #ddd; }
.mobile_nav:after { clear:both; display:block; content:""; *zoom:1 }
.logo { float:left; }
.mobile_btn { float:right; cursor:pointer}
.dropdown { position:absolute; top:50px; left:0; width:100%; }
.dropdown li a { display:block; color:#fff; background:#555; border-bottom:1px solid #777; padding:0 10px }
.dropdown li a:hover { background:#444; }
}
</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$(".dropdown").hide();
$(".mobile_btn").click(function() {
$(".dropdown").slideToggle("fast");
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
<li>
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
<li>
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
<li>
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
</ul>
</div>
<!-- 해상도 768px 일때 실행 {-->
<div class="mobile_nav">
<div class="logo">site logo</div>
<div class="mobile_btn">메뉴</div>
<div class="dropdown">
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</div>
</div>
<!-- } 해상도 768px 일때 실행 -->
</body>
</html>
