모바일 576px일시 전체메뉴 오른쪽으로 슬라이드 되는 html+css+script 입니다.

쪼탱

· 2년 전 · 조회 1234 1234

[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>

// 슬라이드 메뉴 열기
openButton.addEventListener('click', () => {
slideMenu.classList.add('active');
});

// 슬라이드 메뉴 닫기
closeButton.addEventListener('click', () => {
slideMenu.classList.remove('active');
});
</script>
</body>
</html>

[/code]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

영카트5 팁자료실

글쓰기

번호	제목	글쓴이	날짜	조회
161	상품 리스트 정렬 순서를 최근 등록순으로 정렬하기 [6]	작은별 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	6838
160	특정 게시판에 영카트 head, tail 파일을 적용하는 방법 [12]	작은별 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	7040
159	메인, 상품분류, 상품상세 해드에 베너나 이미지 각각 다르게 불러오기 [5]	블랙앤화이트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4590
158	config.php에서 보안설정 [2]	사랑둥이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5168
157	영카트 상품후기 비회원 가능하게 [1]	먼지손 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	6789
156	네이버페이 버튼 비노출 상품일 경우에 사용할 수 있는 방법입니다. [3]	두꺼비밥 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5026
155	장바구니에서 선택옵션/추가옵션 합산금액 표시방법 [7]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	7606
154	모바일 카카오톡 공유하기 버튼 이미지 포함으로 변경 [4]	김쩔짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5388
153	모바일 전환이 잘 안될 시 (크롬 개발자도구 포함)	김쩔짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4383
152	KCP 결제시 6003 요청 전문 복호화 오류..	쿠얼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	6549
151	영카트5 주문서 작성 오류 및 추가배송비 적용되지 않는 문제 해결하기	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4756
150	영카트5 엑셀 주문내역 출력시 한글깨짐 현상 대처방법	ideaman 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5434
149	네이버 페이 연동소스, 가입절차 및 연동 가이드파일 다운로드 주소 [7]	붉은바람 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	15842
148	상품 구매후기(사용후기) 최근게시글 [6]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	7448
147	일괄판매 및 일괄판매중지 설정(체크박스 활용) 팁입니다. [1]	뒷집돌쇠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4103
146	LG U+ 에스크로 스크립트로 인해 보안경고창이 자주 열리는 문제 해결	인텔리전트웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5097
145	NAS에서 영카트 운영(KCP PG사 이용) [2]	쿠얼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4372
144	영카트 레벨별 결제금액 설정 [21]	SSU53rd 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	9585
143	[별것도 아닌팁] 쇼핑몰 별도 관리코드 설정 [6]	뒷집돌쇠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5568
142	[팁] kcp 인증모듈 바이너리 타입으로 설정해주세요 완벽 해결방법. [2]	디자인PHP 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4711
141	[팁] 구매수량 버튼 변경하기! [3]	디자인PHP 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5244
140	작은 정보) 상품검색 상품명으로만 검색하기	셀리나 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4805
139	영카트5에서 신용카드 결제 시 입금확인 문자가 안갈경우 [2]	김쩔짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4513
138	비회원에서 장바구니에 담고, 회원 로그인 후 주문시 장바구니에는 mb_id가 들어가있지 않은 상태가 됩니다 [2]	김쩔짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5356
137	마이크로소프트 빙 번역기 라이브러리입니다. [3]	김쩔짱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4611
136	상품옵션 금액표시 옥션처럼 변경 (상품옵션 (+0)원 없애기) [6]	쥐치포 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	9220
135	원본이미지 작은 이미지(600px) 변경후 원본이미지 삭제 [1]	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4929
134	제품링크 sns 공유하기 [6]	뒷집돌쇠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	9104
133	모바일 상단 보드 제외 수정 코딩 문의 [2]	개같은내인생 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	4470
132	textarea 자동으로 크기가 조정되도록 수정	꾸냥2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	5098