728x90
반응형
레이아웃 버튼 효과
HTML & CSS
<!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">
<title>A1</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
background-color: yellow;
display: flex;
}
#header h1{
width: 20%;
height: inherit;
background-color: #555;
}
#header h2{
width: 80%;
height: inherit;
background-color: #FF7D7D;
}
#nav {
width: 100%;
height: 300px;
background-color: pink;
}
#main {
width: 100%;
height: 200px;
display: flex;
}
.m1 {
width: 33.333%;
background-color: #FF6161;
}
.m2 {
width: 33.333%;
background-color: #910000;
}
.m3 {
width: 33.333%;
background-color: #EEFF52;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
#footer .f1 {
width: 20%;
background-color: #fff;
}
#footer .f2 {
width: 80%;
background-color: #000000;
}
#footer .f3 {
width: 20%;
background-color: #fff;
}
a {
text-decoration: none;
color: #000000;
}
li {
list-style: none;
}
.nav {
width: 80%;
background-color: #ccc;
padding: 30px 40px;
}
.nav > ul {
display: flex;
justify-content: right;
}
.nav > ul > li {
position: relative;
}
.nav > ul > li > a {
background-color: #e65959;
display: block;
padding: 10px 40px;
}
.nav > ul > li > a:hover {
background-color: #a36060
}
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 40px;
background-color: #ccc;
width: 100%;
display: none;
}
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
}
.nav > ul > li > ul > li > a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<h1></h1>
<nav class="nav">
<ul>
<li>
<a href="#">메뉴1</a>
<ul class="submenu">
<li><a href="#">서브메뉴1-1</a></li>
<li><a href="#">서브메뉴1-2</a></li>
<li><a href="#">서브메뉴1-3</a></li>
<li><a href="#">서브메뉴1-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul class="submenu">
<li><a href="#">서브메뉴2-1</a></li>
<li><a href="#">서브메뉴2-2</a></li>
<li><a href="#">서브메뉴2-3</a></li>
<li><a href="#">서브메뉴2-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul class="submenu">
<li><a href="#">서브메뉴3-1</a></li>
<li><a href="#">서브메뉴3-2</a></li>
<li><a href="#">서브메뉴3-3</a></li>
<li><a href="#">서브메뉴3-4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul class="submenu">
<li><a href="#">서브메뉴4-1</a></li>
<li><a href="#">서브메뉴4-2</a></li>
<li><a href="#">서브메뉴4-3</a></li>
<li><a href="#">서브메뉴4-4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<nav id="nav"></nav>
<main id="main">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</main>
<footer id="footer">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
</footer>
</div>JAVASCRIPT & jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// $(".nav > ul > li").mouseover(function(){
// $(this).find(".submenu").stop().slideDown();
// $(".nav > ul").find(".submenu").stop().slideDown();
// });
// $(".nav > ul > li").mouseout(function(){
// $(this).find(".submenu").stop().slideUp();
// $(".nav > ul").find(".submenu").stop().slideUp();
// });
// document.querySelectorAll(".nav > ul > li").forEach(li => {
// li.addEventListener("mouseover", () => {
// });
// });
</script>
<script>
const menuItems = document.querySelectorAll('.nav > ul > li');
menuItems.forEach(menuItem => {
const submenu = menuItem.querySelector('.submenu');
if (submenu) {
const menuLink = menuItem.querySelector('a');
menuLink.addEventListener('mouseenter', () => {
submenu.style.display = 'block';
});
menuLink.addEventListener('mouseleave', () => {
submenu.style.display = 'none';
});
}
});
</script>코드 설명
먼저, querySelectorAll() 메소드를 사용하여 HTML 문서 내에서 .nav > ul > li 셀렉터에 해당하는 요소들을 선택합니다. 이 요소들은 navigation 메뉴의 각 메뉴 아이템을 나타냅니다.
그리고 forEach() 메소드를 사용하여 선택된 요소들을 반복하며, 각각의 요소에서 querySelector() 메소드를 사용하여 .submenu 셀렉터에 해당하는 요소를 찾습니다. 이 요소는 해당 메뉴 아이템의 하위 메뉴(submenu)를 나타냅니다.
그 다음, 하위 메뉴(submenu) 요소가 존재하는 경우, 해당 메뉴 아이템의 링크(a 요소)를 찾습니다. 그리고 해당 링크에 mouseenter 이벤트 핸들러와 mouseleave 이벤트 핸들러를 추가합니다.
mouseenter 이벤트가 발생하면, 하위 메뉴(submenu) 요소의 display 속성을 block으로 변경하여 하위 메뉴를 보여주고, mouseleave 이벤트가 발생하면 display 속성을 none으로 변경하여 하위 메뉴를 감춥니다.
결과적으로 위 코드는 navigation 메뉴의 하위 메뉴(submenu)를 보여주거나 감추는 기능을 구현합니다.