사용자 해상도에 맞춰서 메뉴 크기가 조절되었으면 좋겠는데
답변 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>답변을 작성하려면 로그인이 필요합니다.