반응형메뉴 resize할 때 질문이요 채택완료
은요이
2년 전
조회 1,472
반응형 메뉴를 만들었습니다. resize if문으로 작업했습니다 새로고침할땐 괜찮은데 화면 크기가 줄어들거나, 늘어났을때 문제가 있네요.
수정하려면 어떻게 해야되나요ㅠㅠ
코드는 아래링크에 있습니다!
https://codepen.io/aldo814-the-bold/pen/poOLRNX
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
반응형 예제인데요. 골격만 있습니다. 만드시는데 참조해 보세요. 감사합니다.
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p> </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"></p>
<p> <title>test03.html</title></p>
<p> <!-- Font --></p>
<p> <link rel="stylesheet" href="fonts/fonts.css" /></p>
<p> <!-- Normalize --></p>
<p> <link rel="stylesheet" href="css/normalize.css" /></p>
<p> <!-- Custom --></p>
<p> <link rel="stylesheet" href="css/utility.css" /></p>
<p> <link rel="stylesheet" href="css/style.css" /></p>
<p> <link rel="stylesheet" href="css/reponsive.css" /></p>
<p> <style></p>
<p> html,</p>
<p> body {</p>
<p> height: 100%;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> }</p>
<p> </p>
<p> .wrapper {</p>
<p> height: 100%;</p>
<p> display: flex;</p>
<p> flex-direction: column;</p>
<p> }</p>
<p> </p>
<p> header {</p>
<p> display: flex;</p>
<p> justify-content: space-between;</p>
<p> align-items: center;</p>
<p> background-color: #333;</p>
<p> color: #fff;</p>
<p> padding: 10px;</p>
<p> }</p>
<p> </p>
<p> .logo {</p>
<p> font-size: 24px;</p>
<p> cursor: pointer;</p>
<p> }</p>
<p> </p>
<p> .menu-toggle {</p>
<p> display: none;</p>
<p> cursor: pointer;</p>
<p> }</p>
<p> </p>
<p> .menu-toggle span {</p>
<p> display: block;</p>
<p> width: 25px;</p>
<p> height: 3px;</p>
<p> margin: 5px 0;</p>
<p> background-color: #fff;</p>
<p> }</p>
<p> </p>
<p> .menu {</p>
<p> display: flex;</p>
<p> }</p>
<p> </p>
<p> .menu-close {</p>
<p> display: none;</p>
<p> }</p>
<p> </p>
<p> .menu ul {</p>
<p> display: flex;</p>
<p> list-style: none;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> }</p>
<p> </p>
<p> .menu li {</p>
<p> margin-right: 20px;</p>
<p> }</p>
<p> </p>
<p> .menu a {</p>
<p> color: #fff;</p>
<p> text-decoration: none;</p>
<p> }</p>
<p> </p>
<p> .container {</p>
<p> flex: 1;</p>
<p> padding: 20px;</p>
<p> }</p>
<p> </p>
<p> .footer {</p>
<p> flex-shrink: 0;</p>
<p> height: 60px;</p>
<p> background-color: #333;</p>
<p> color: #fff;</p>
<p> text-align: center;</p>
<p> padding: 10px;</p>
<p> }</p>
<p> </p>
<p> @media screen and (max-width: 768px) {</p>
<p> header {</p>
<p> flex-direction: row;</p>
<p> align-items: center;</p>
<p> padding: 20px;</p>
<p> position: relative;</p>
<p> }</p>
<p> </p>
<p> /* .menu {</p>
<p> display: none;</p>
<p> position: absolute;</p>
<p> top: 100%;</p>
<p> left: 0;</p>
<p> width: 100%;</p>
<p> background-color: #333;</p>
<p> } */</p>
<p> </p>
<p> /* .menu {</p>
<p> position: fixed;</p>
<p> top: 0;</p>
<p> right: -100%;</p>
<p> width: 75%;</p>
<p> height: 100vh;</p>
<p> background-color: #fff;</p>
<p> transition: right 0.3s ease-in-out;</p>
<p> }</p>
<p> </p>
<p> .menu li {</p>
<p> margin-right: 0;</p>
<p> }</p>
<p> </p>
<p> .menu a {</p>
<p> display: block;</p>
<p> padding: 10px;</p>
<p> border-bottom: 1px solid #fff;</p>
<p> } */</p>
<p>
</p>
<p> .menu-toggle {</p>
<p> display: block;</p>
<p> }</p>
<p> </p>
<p> /* .menu-toggle.active {</p>
<p> display: flex;</p>
<p> justify-content: flex-end;</p>
<p> align-items: center;</p>
<p> width: 25%;</p>
<p> } */</p>
<p> </p>
<p> /* .menu-toggle.active~.menu {</p>
<p> display: flex;</p>
<p> flex-direction: column;</p>
<p> align-items: center;</p>
<p> width: 25%;</p>
<p> height: auto;</p>
<p> position: fixed;</p>
<p> top: 0;</p>
<p> right: -100%;</p>
<p> width: 75%;</p>
<p> height: 100vh;</p>
<p> background-color: #fff;</p>
<p> transition: right 0.3s ease-in-out;</p>
<p> } */</p>
<p> .menu {</p>
<p> position: fixed;</p>
<p> top: 0;</p>
<p> right: -100%;</p>
<p> width: 75%;</p>
<p> height: 100vh;</p>
<p> background-color: #fff;</p>
<p> transition: right 0.3s ease-in-out;</p>
<p> }</p>
<p> </p>
<p> .menu.active {</p>
<p> border: 2px solid #ccc;</p>
<p> right: 0;</p>
<p> display: flex;</p>
<p> flex-direction: column;</p>
<p> }</p>
<p> </p>
<p> .menu-toggle {</p>
<p> background: linear-gradient(#555353, #363535, #303030);</p>
<p> /*linear-gradient(#cdcdcd, #a8a4a4e0, #dddada);*/</p>
<p> padding: 10px;</p>
<p> border: 2px solid #f5f5f5;</p>
<p> border-radius: 6px;</p>
<p> box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.35), 0 5px 5px rgba(0, 0, 0, 0.5), 0 15px 25px rgba(0, 0, 0, 0.35);</p>
<p> }</p>
<p> </p>
<p> .menu-close {</p>
<p> display: inline-block;</p>
<p> position: absolute;</p>
<p> top: 10px;</p>
<p> right: 10px;</p>
<p> font-size: 1.5rem;</p>
<p> border: 1px solid #ccc;</p>
<p> color: #fff;</p>
<p> background-color: red;</p>
<p> width: 35px;</p>
<p> height: 35px;</p>
<p> border-radius: 35px;</p>
<p> /*100%;*/</p>
<p> /*transparent;*/</p>
<p> /* margin: 25px 0; */</p>
<p> /* padding: 25px 0; */</p>
<p> cursor: pointer;</p>
<p> }</p>
<p> </p>
<p> .menu.active ul {</p>
<p> flex-direction: column;</p>
<p> flex-wrap: nowrap;</p>
<p> /* justify-content: top; */</p>
<p> flex-shrink: 0;</p>
<p> position: absolute;</p>
<p> top: 20px;</p>
<p> left: 10px;</p>
<p> width: 100%;</p>
<p> list-style: none;</p>
<p> margin: 30px 0;</p>
<p> padding: 0;</p>
<p> }</p>
<p> </p>
<p> .menu.active li {</p>
<p> margin-bottom: 10px;</p>
<p> }</p>
<p> </p>
<p> .menu.active li a {</p>
<p> display: block;</p>
<p> /* width: 80px; */</p>
<p> height: 50px;</p>
<p> padding: 10px;</p>
<p> background-color: #eee;</p>
<p> text-decoration: none;</p>
<p> color: #333;</p>
<p> line-height: 50px;</p>
<p> }</p>
<p> }</p>
<p> </style></p>
<p></head></p>
<p> </p>
<p><body></p>
<p> <div class="wrapper"></p>
<p> <header></p>
<p> <div class="logo"></p>
<p> <h1>Logo</h1></p>
<p> </div></p>
<p> <a href="#" class="menu-toggle"></p>
<p> <span></span></p>
<p> <span></span></p>
<p> <span></span></p>
<p> </a></p>
<p> <nav class="menu"></p>
<p> <button class="menu-close">×</button></p>
<p> <ul></p>
<p> <li><a href="#">Menu 1</a></li></p>
<p> <li><a href="#">Menu 2</a></li></p>
<p> <li><a href="#">Menu 3</a></li></p>
<p> </ul></p>
<p> </nav></p>
<p> </header></p>
<p> <div class="container"></p>
<p> <h2>Main Content</h2></p>
<p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh</p>
<p> nibh suscipit est, nec blandit nunc eros ac tortor.</p></p>
<p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh</p>
<p> nibh suscipit est, nec blandit nunc eros ac tortor.</p></p>
<p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh</p>
<p> nibh suscipit est, nec blandit nunc eros ac tortor.</p></p>
<p> </p>
<p> </div></p>
<p> <footer class="footer"></p>
<p> <p>© 2023 My Website. All rights reserved.</p></p>
<p> </footer></p>
<p> </div></p>
<p></body></p>
<p><script></p>
<p> var toggle_menu = document.querySelector('.menu-toggle');</p>
<p> var menulist = document.querySelector('.menu');</p>
<p> var menu_close = document.querySelector('.menu-close');</p>
<p> var loggo_click = document.querySelector('.logo');</p>
<p> </p>
<p> loggo_click.addEventListener('click', function () {</p>
<p> window.location.href = "./test03.html";</p>
<p> });</p>
<p> </p>
<p> toggle_menu.addEventListener('click', function () {</p>
<p> toggle_menu.classList.toggle('active');</p>
<p> menulist.classList.toggle('active');</p>
<p> menu_close.classList.toggle('active');</p>
<p> });</p>
<p> menu_close.addEventListener('click', function () {</p>
<p> toggle_menu.classList.toggle('active');</p>
<p> menulist.classList.toggle('active');</p>
<p> });</p>
<p> </p>
<p></script></p>
<p> </p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인