WEB/JavaScript
Js - dropdown menu
jomericano
2022. 6. 15. 18:15
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 드롭다운메뉴</title>
<style>
.navbar { overflow: hidden; background: black; }
/* 내비바 */
.navbar a { float: left; font-size: 16px;
color: white; text-align: center;
padding: 14px 16px; text-decoration: none; }
/* 내비바 링크 */
.dropdown {
float: left;
} /* 드롭다운 메뉴 */
.dropdown .dropmenu {
font-size: 16px;
color: white;
padding: 14px 16px;
display: inline-block;
} /* 드롭다운 메뉴 속 메뉴 영역 */
.navbar a:hover, .dropdown:hover .dropmenu {
background-color: red;
} /* 메뉴항목에 마우스 올렸을때 배경색 변경 */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 105px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
} /* 드롭다운 메뉴 속 메뉴 디자인 - 메뉴는 숨김 */
.dropdown:hover .dropdown-content {
display: block;
} /* 드롭다운메뉴가 숨겨진 상위메뉴에
마우스를 올리면 메뉴가 나타남 */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
} /* 드롭다운 메뉴 속 메뉴 링크 */
.dropdown-content a:hover {
background-color: #ddd;
} /* 드롭다운 메뉴항목에 마우스 올렸을때 배경색 변경 */
</style>
</head>
<body>
<h1>자바스크립트 드롭다운메뉴</h1>
<p>메뉴에 마우스포인트를 올렸을 때 숨겨진 메뉴가 나오는 메뉴</p>
<div class="navbar">
<a href="#">Home</a>
<a href="#">News</a>
<div class="dropdown">
<span class="dropmenu">dropdown</span>
<div class = "dropdown-content">
<a href="#">naver</a>
<a href="#">google</a>
<a href="#">daum</a>
</div>
</div>
</div>
</body>
</html>