결과물
Drop 버튼을 누르면 아래와 같이 메뉴가 나오는 토글 버튼을 만들어 보았다.
codepen 실제 결과물 보기: https://codepen.io/pen?template=VwNqPGw
dropDown.html
버튼 클릭 시 dp_menu() 함수가 실행된다.
Menu들은 기본으로 display:none 스타일링이 되어있다가 버튼이 클릭되면 display: block으로 바뀐다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./dropMenu.css">
<title>Document</title>
</head>
<body>
<div class='dropdown'>
<button onClick='dp_menu()' class="button">Drop</button>
<div style='display: none;' id='drop-menu'>
<a href='#'>Menu1</a>
<a href='#'>Menu2</a>
<a href='#'>Menu3</a>
<a href='#'>Menu4</a>
</div>
</div>
<script type="text/javascript" src="dropMenu.js"></script>
</body>
</html>dropDown.css
body {
margin: 10px;
padding: 10px;
text-align: center;
}
.dropdown {
position: relative;
display: inline-block;
}
.button {
padding: 10px 40px;
font-size: 20px;
background-color: orange;
color: white;
border: none;
}
#drop-menu {
position: absolute;
z-index: 1;
}
#drop-menu a{
display: block;
font-size: 20px;
text-decoration: none;
padding: 10px 32px;
background-color: #dfdfdf;
color: black;
}dropDown.js
function dp_menu() {
let click = document.getElementById('drop-menu');
if (click.style.display === 'none'){
click.style.display = 'block';
} else {
click.style.display = 'none';
}
}
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [ JavaScript ] findIndex와 indexOf의 차이점 알아보기 (0) | 2024.10.17 |
|---|---|
| [ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 (4) | 2024.09.09 |
| [ JavaScript ] Class 초기값 설정해주기, 상속 하기 (0) | 2022.12.05 |
| [ JavaScript ] currentTarget vs target 차이점 (0) | 2022.11.17 |
| [ JavaScript ] ES6의 화살표 함수 (0) | 2022.10.23 |
댓글