안녕하세요. 오늘은 javascript로 DOM의 css style을 동적으로 제어하여
확장형 사이드 메뉴 만드는 법을 알아보도록 하겠습니다.
완성 시 이렇게 만들어지는 모습 확인하실 수 있습니다.
전체코드.html
<!DOCTYPE html>
<html lang="ko">
<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">
<style>
.sidebar {
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.3s;/*펼침속도*/
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
}
/*메뉴열기 hover 시*/
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left 0.4s;
padding: 16px;
}
</style>
<title>확장형 메뉴 샘플</title>
</head>
<body>
<!--사이드 메뉴 영역-->
<div class="sidebar">
<a class="closebtn" onclick="closeMenu()">×</a>
<a href="#">회사소개</a>
<a href="#">연혁</a>
<a href="#">비즈니스</a>
<a href="#">연락처</a>
</div>
<!--화면영역-->
<div id="main">
<button class="openbtn" onclick="openMenu()">
☰ 메뉴 열기
</button>
<h2>확장형 메뉴</h2>
<p>메뉴열기 버튼 클릭 시 확장형 메뉴가 왼쪽에서 오른쪽 방향으로 나옵니다.</p>
</div>
<script>
function openMenu() {
document.getElementById("main").style.marginLeft = "250px";
document.querySelector('.sidebar').style.width = "250px";
document.querySelector('.openbtn').style.display = 'none';
}
function closeMenu() {
document.getElementById("main").style.marginLeft= "0";
document.querySelector('.sidebar').style.width = "0";
document.querySelector('.openbtn').style.display = 'block';
}
</script>
</body>
</html>
아래 링크 참고하였습니다.
https://hianna.tistory.com/671
[Javascript] DOM의 style(css) 변경하기, 읽기 (style, getComputedStyle())
Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javascript] class 추가/변경/삭제/읽기 (className, classList) [Javascript] innerHTML, innerText, textC
hianna.tistory.com
https://www.w3schools.com/jsref/dom_obj_style.asp
HTML DOM Style object
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
HTMLElement.style - Web APIs | MDN
The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
| [JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법 (0) | 2023.04.02 |
|---|---|
| [JavaScript] 마우스 드래그로 일괄 선택하기 (0) | 2023.03.31 |
| [JavaScript] fetch 요청 취소 (0) | 2023.03.19 |
| [JavaScript] Selector 태그에 placeholder 적용하기 (0) | 2023.03.18 |
| [JavaScript] 체크박스 커스텀하기 (0) | 2023.03.04 |