간단한 반응형 페이지 레이아웃 정보
HTML 간단한 반응형 페이지 레이아웃
본문
모바일 버전이 필요해서 간단하게 작성했습니다.
페이지 레이아웃이라 참조용으로 보시면 좋을 둣 합니다.
<!DOCTYPE html>
<html lang="en">
<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">
<title>test03.html</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.logo {
font-size: 24px;
cursor: pointer;
}
.menu-toggle {
display: none;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
margin: 5px 0;
background-color: #fff;
}
.menu {
display: flex;
}
.menu-close {
display: none;
}
.menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
margin-right: 20px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.container {
flex: 1;
padding: 20px;
}
.footer {
flex-shrink: 0;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
@media screen and (max-width: 768px) {
header {
flex-direction: row;
align-items: center;
padding: 20px;
position: relative;
}
/* .menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #333;
} */
/* .menu {
position: fixed;
top: 0;
right: -100%;
width: 75%;
height: 100vh;
background-color: #fff;
transition: right 0.3s ease-in-out;
}
.menu li {
margin-right: 0;
}
.menu a {
display: block;
padding: 10px;
border-bottom: 1px solid #fff;
} */
.menu-toggle {
display: block;
}
/* .menu-toggle.active {
display: flex;
justify-content: flex-end;
align-items: center;
width: 25%;
} */
/* .menu-toggle.active~.menu {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
height: auto;
position: fixed;
top: 0;
right: -100%;
width: 75%;
height: 100vh;
background-color: #fff;
transition: right 0.3s ease-in-out;
} */
.menu {
position: fixed;
top: 0;
right: -100%;
width: 75%;
height: 100vh;
background-color: #fff;
transition: right 0.3s ease-in-out;
}
.menu.active {
border: 2px solid #ccc;
right: 0;
display: flex;
flex-direction: column;
}
.menu-toggle {
background: linear-gradient(#555353, #363535, #303030);
/*linear-gradient(#cdcdcd, #a8a4a4e0, #dddada);*/
padding: 10px;
border: 2px solid #f5f5f5;
border-radius: 6px;
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);
}
.menu-close {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5rem;
border: 1px solid #ccc;
color: #fff;
background-color: red;
width: 35px;
height: 35px;
border-radius: 35px;
/*100%;*/
/*transparent;*/
/* margin: 25px 0; */
/* padding: 25px 0; */
cursor: pointer;
}
.menu.active ul {
flex-direction: column;
flex-wrap: nowrap;
/* justify-content: top; */
flex-shrink: 0;
position: absolute;
top: 20px;
left: 10px;
width: 100%;
list-style: none;
margin: 30px 0;
padding: 0;
}
.menu.active li {
margin-bottom: 10px;
}
.menu.active li a {
display: block;
/* width: 80px; */
height: 50px;
padding: 10px;
background-color: #eee;
text-decoration: none;
color: #333;
line-height: 50px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<h1>Logo</h1>
</div>
<a href="#" class="menu-toggle">
<span></span>
<span></span>
<span></span>
</a>
<nav class="menu">
<button class="menu-close">×</button>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh
nibh suscipit est, nec blandit nunc eros ac tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh
nibh suscipit est, nec blandit nunc eros ac tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh
nibh suscipit est, nec blandit nunc eros ac tortor.</p>
</div>
<footer class="footer">
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</div>
</body>
<script>
var toggle_menu = document.querySelector('.menu-toggle');
var menulist = document.querySelector('.menu');
var menu_close = document.querySelector('.menu-close');
var loggo_click = document.querySelector('.logo');
loggo_click.addEventListener('click', function () {
window.location.href = "./해당파일명.html"; // 이 소스를 저장한 파일명을 적어주세요.
});
toggle_menu.addEventListener('click', function () {
toggle_menu.classList.toggle('active');
menulist.classList.toggle('active');
menu_close.classList.toggle('active');
});
menu_close.addEventListener('click', function () {
toggle_menu.classList.toggle('active');
menulist.classList.toggle('active');
});
</script>
</html>
추천
0
0
댓글 1개
감사합니다