사용자 해상도에 맞춰서 메뉴 크기가 조절되었으면 좋겠는데 채택완료
dbstnwo11
8년 전
조회 3,705
.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;}
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
올리신 소스 보고 제가 새롭게 수정했습니다. 응용해서 해보세요~
해상도 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.
모바일 이든 반응형 이든 필수 메타 태그 입니다.
</p><p><!doctype html></p><p><html lang="ko"></p><p><head></p><p><meta charset="utf-8"></p><p><meta http-equiv="X-UA-Compatible" content="IE=edge"></p><p><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"></p><p><meta name="subject" content=""></p><p><meta name="keywords" content=""></p><p><title>사이트</title></p><p> </p><p><style></p><p>html { font-size:14px !important; }</p><p>body { margin:0; padding:0; }</p><p>a:link, a:visited {color:#666;text-decoration:none}</p><p>ul { list-style:none; !important; padding:0; margin:0; }</p><p> </p><p>.nav {background:#333;width:100%;height:50px;margin:0 auto; text-align:center;}</p><p>.nav a {color:#fff;font-weight:700;}</p><p>.nav ul:after { clear:both; display:block; content:""; *zoom:1}</p><p>.nav ul li {float:left;line-height:50px;height:50px;font-size:1.2rem;width:25%}</p><p>.nav ul li a { display:block; }</p><p>.nav ul li:hover { background:#222 }</p><p> </p><p>/*서브메뉴*/</p><p>.nav ul.sub {display:none;}</p><p>.nav ul li:hover > ul.sub { display:block; text-align:center;margin:0 auto; background:#222; border-top:1px solid #333}</p><p>.nav ul.sub li {display:block !important; width:100% !important; line-height:40px !important; height:40px !important; }</p><p>.nav ul.sub li a { color:#ddd;font-size:1rem;text-align:center}</p><p>.nav ul.sub li:hover a { color:#fff; background:#333 }</p><p>.t_btn{display:none;}</p><p> </p><p>.mobile_nav { display:none }</p><p>@media all and (max-width: 768px) { /* 해상도 768px 이하일 때 실행 */</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.nav { display:none }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.mobile_nav { display:block; position:relative; line-height:50px;height:50px; padding:0 10px; border-bottom:1px solid #ddd; }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.mobile_nav:after { clear:both; display:block; content:""; *zoom:1 }</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.logo { float:left; }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.mobile_btn { float:right; cursor:pointer}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.dropdown { position:absolute; top:50px; left:0; width:100%; }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.dropdown li a { display:block; color:#fff; background:#555; border-bottom:1px solid #777; padding:0 10px }</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.dropdown li a:hover { background:#444; }</p><p> </p><p>}</p><p></style></p><p> </p><p><script src="//code.jquery.com/jquery.min.js"></script></p><p><script></p><p>$(function() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(".dropdown").hide();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(".mobile_btn").click(function() { </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(".dropdown").slideToggle("fast");</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p> </p><p>});</p><p></script></p><p> </p><p></head></p><p> </p><p><body></p><p> </p><p> </p><p> </p><p><div class="nav"></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="#">회사소개</a></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul class="sub"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">인사말</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">오시는길</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="#">회사소개</a></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul class="sub"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">인사말</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">오시는길</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="#">회사소개</a></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul class="sub"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">인사말</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">오시는길</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="#">회사소개</a></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul class="sub"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">인사말</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">오시는길</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p> </p><p></div></p><p> </p><p> </p><p><!-- 해상도 768px 일때 실행 {--></p><p><div class="mobile_nav"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="logo">site logo</div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="mobile_btn">메뉴</div></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="dropdown"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">서브메뉴1</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">서브메뉴2</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li><a href="#">서브메뉴3</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p> </p><p></div></p><p><!-- } 해상도 768px 일때 실행 --></p><p> </p><p> </p><p> </p><p> </p><p></body></p><p></html></p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인