[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide Menu</title>
<style>
.slide-menu-mn {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #fff;
transition: left 0.3s ease-in-out;
}
.slide-menu-mn.active {
left: 0;
}
.close-btn-mn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #000;
}
/* 576px 이상인 경우에는 슬라이드 메뉴가 열리지 않음 */
@media (min-width: 576px) {
.slide-menu-mn {
display: none;
}
.float-l {
display: none;
}
}
</style>
</head>
<body>
<div id="slide-menu-mn" class="slide-menu-mn">
<!-- 슬라이드 메뉴 내용 -->
<button type="button" id="close-btn-mn" class="close-btn-mn">
<i class="comp_icon_lnb_close">X</i>
</button>
<h1>Slide Menu</h1>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
</ul>
</div>
<div class="float-l">
<button type="button" class="btn-mn">
<i class="icon-gnb icon-threebar d-block"></i>
</button>
</div>
<script>
const slideMenu = document.getElementById('slide-menu-mn');
const openButton = document.querySelector('.btn-mn');
const closeButton = document.getElementById('close-btn-mn');
// 슬라이드 메뉴 열기
openButton.addEventListener('click', () => {
slideMenu.classList.add('active');
});
// 슬라이드 메뉴 닫기
closeButton.addEventListener('click', () => {
slideMenu.classList.remove('active');
});
</script>
</body>
</html>
[/code]
게시글 목록
| 번호 | 제목 |
|---|---|
| 2169 | |
| 2168 | |
| 2167 | |
| 2158 | |
| 2146 | |
| 2140 | |
| 2130 | |
| 2114 | |
| 2102 | |
| 2095 | |
| 2084 | |
| 2075 | |
| 2072 | |
| 2070 | |
| 2069 | |
| 2065 | |
| 2058 | |
| 2056 | |
| 2055 | |
| 2054 | |
| 2049 | |
| 2038 | |
| 2036 | |
| 1989 | |
| 1956 | |
| 1923 | |
| 1918 | |
| 1904 | |
| 1892 | |
| 1891 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기