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

쪼탱

· 2년 전 · 조회 1233 1233

[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 팁자료실

글쓰기

번호	제목	글쓴이	날짜	조회
71	영카트에서 FAQ, 1:1 게시판 열기 [8]	fm25 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	7872
70	시중가격에 줄을 그어 표시하는 방법입니다. [3]	두꺼비밥 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	5642
69	구매하기 장바구니 버튼 이미지화 하는 방법 [3]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	5786
68	모바일 버전으로 보기, PC 버전으로 보기 [7]	fm25 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	11894
67	쇼핑몰, 커뮤니티 공통 페이지에 head, tail 따로 적용하기 [13]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	8073
66	'오늘 본 상품' 아래에 배너 달기	fm25 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6184
65	상품리스트에서 각 상품별 위시리스트 개수 표시하기 [2]	편리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6312
64	추가배송비 자료입니다. (도선료) [6]	바트심 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6624
63	aside에 그룹 메뉴 넣기 [2]	fm25 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7038
62	[영카트 5] 레이아웃 기본 구조 [7]	fm25 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	10229
61	그누보드가 설치된 사이트에 영카트 추가 설치하기(영카트 5.2.9.8.2) [19]	fm25 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	23165
60	[알툴바, IE11]상품옵션 선택시 아무 반응 없는 오류 수정 [5]	xepiesta 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4875
59	관리자 주문내역 리스트에서 배송조회 가능하게 하기 [4]	영호충 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	8271
58	선택옵션 0원 으로 나오는거 금액이 없을때 안나오게 하기 [10]	붉은바람 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	9004
57	모바일에도 배너 기능 넣기 [2]	뽁스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6684
56	상품설명 이미지로 등록시 에디터 사용안하고 첨부파일 사용하기	vitamin 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7169
55	상품상단내용, 상품하단내용 위치 변경	vitamin 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6205
54	상품 주문시 추가내용 및 파일을 받을 수 있게 하는 팁 [52]	Rini 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	15790
53	올더게이트에서 ISP 결제시 복호화 오류 원인과 해결방법 [1]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6656
52	메뉴설정 / 메뉴추가에 쇼핑몰 상품분류추가하기 [1]	잠와 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7177
51	메인에서 최신등록순 상품출력 [7]	균이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	10053
50	배너관리에서 이미지 항상 보이게 하는 방법 [3]	vitamin 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5160
49	[모바일] 제품상세페이지에서 상품정보(상품설명) 함께보는 방법 [8]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	8438
48	[관리자] 쇼핑몰 분류관리에서 모바일 이미지 크기 조절 [5]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6143
47	스크롤 되어도 상단 헤더(메뉴) 보이게 [6]	참없다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7210
46	마이페이지 호출시 403에러 발생할 경우	컴대장 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4209
45	상품상세페이지의 상단에 제품이미지가 안보일때 [3]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	8044
44	1:1 게시판에 답변 제목 자동으로 달리기 [1]	이시태 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3925
43	1:1 문의 최신글 스킨	플록 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5438
42	youngcart5.0.8 기준 폴더별 파일 구조 [6]	파란나라 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	8194