오늘은 메뉴 유형 2가지를 만들어보겠습니다!
메뉴 유형 1
구조
<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>
메뉴 안에 서브메뉴가 있는 구조입니다. 각각의 메뉴에 마우스오버를 하면 서브메뉴가 나오는 구조입니다.
CSS
.nav {
width: 80%;
background-color: #ccc;
}
.nav > ul {
display: flex;
justify-content: right;
padding: 30px 40px;
}
.nav > ul > li {
position: relative;
}
.nav > ul > li > a {
background-color: #80ffcc;
padding: 10px 40px;
}
.nav > ul > li > a:hover {
background-color: #31c288;
transition: all 0.3s;
}
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 28px;
background-color: #5f5f5f;
width: 100%;
display: none;
}
.nav > ul > li > ul > li > a {
padding: 10px;
display: block;
text-align: center;
color: #fff;
}
.nav > ul > li > ul > li > a:hover {
background-color: #353535;
transition: all 0.5s;
}여기서 중요한 부분은 서브메뉴들은 평소에 display: none를 해주어야 합니다.
스크립트_jQuery
제이쿼리를 이용한 방법입니다.
<!-- 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 > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
});
</script>
.nav > ul > li 선택자에 해당하는 메뉴 아이템에 마우스가 위에 올라갈 때 실행되는 함수를 등록합니다.
이 함수는 $(this).find(".submenu").stop().slideDown() 코드를 실행합니다. 현재 메뉴 아이템에 속한 .submenu 클래스를 가진 하위 메뉴를 보여줍니다.
$(this)는 현재 이벤트가 발생한 메뉴 아이템을 가리키며, .find(".submenu")은 현재 메뉴 아이템에서 .submenu 클래스를 가진 하위 요소를 찾습니다.
.stop() 함수는 현재 실행 중인 모든 애니메이션을 중지합니다. .slideDown() 함수는 해당 요소를 아래쪽으로 슬라이드하여 보여줍니다.
두 번째는 마우스가 메뉴 아이템에서 벗어날 때 실행됩니다. 현재 메뉴 아이템에 속한 .submenu 클래스를 가진 하위 메뉴를 숨깁니다.
.slideUp() 함수는 해당 요소를 위쪽으로 슬라이드하여 숨깁니다.
여기선 this가 중요한 역할을 하네요! ㅎㅎ
스크립트_javascript
<!-- javascript -->
<script>
const mainMenu = document.querySelectorAll(".nav > ul > li");
mainMenu.forEach(li => {
li.addEventListener("mouseover", () => {
li.querySelector(".submenu").style.display = "block";
});
li.addEventListener("mouseout", () => {
li.querySelector(".submenu").style.display = "none";
});
})
</script>자바스크립트를 이용한 방법입니다.
.nav > ul > li 선택자에 해당하는 메뉴 아이템에 mouseover 이벤트를 등록합니다. 즉, 마우스가 메뉴 아이템 위에 올라갈 때 실행되는 함수를 등록합니다.
querySelector 함수를 사용하여 .submenu 클래스를 가진 요소를 찾아 style.display 속성을 "block"으로 변경합니다. 이렇게 하면 해당 요소가 보이게 됩니다.
두 번째 이벤트 핸들러는 마우스가 메뉴 아이템에서 벗어날 때 실행됩니다. 이 이벤트 핸들러는 첫 번째 이벤트 핸들러와 거의 동일하지만, mouseout 이벤트에 대해 등록됩니다. 이 함수는 querySelector 함수를 사용하여 .submenu 클래스를 가진 요소를 찾아 style.display 속성을 "none"으로 변경합니다. 이렇게 하면 해당 요소가 숨겨지게 됩니다.
완성된 페이지
메뉴 유형 2
구조와 CSS는 메뉴 유형 1과 동일하니 스크립트만 정리해보겠습니다!
스크립트_jQuery
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li").find(".submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li").find(".submenu").stop().slideUp();
});
</script>마우스 이벤트를 등록하는 함수인 mouseover()와 mouseout()을 사용하며, find() 함수를 사용하여 메뉴 아이템의 하위 요소를 찾습니다. stop() 함수를 사용하여 이전에 실행 중이던 애니메이션을 중지하고, slideDown() 또는 slideUp() 함수를 사용하여 하위 요소를 보여주거나 숨깁니다.
여기선 서브메뉴 전체를 보여주기 때문에 굳이 this를 사용할 필요가 없습니다.
스크립트_javascript
<!-- javascript -->
<script>
const mainMenu = document.querySelectorAll(".nav > ul > li");
const subMenu = document.querySelectorAll(".submenu");
mainMenu.forEach(li => {
li.addEventListener("mouseover", () => {
subMenu.forEach(el => el.style.display = "block");
});
li.addEventListener("mouseout", () => {
subMenu.forEach(el => el.style.display = "none");
});
});
</script>querySelectorAll() 함수를 사용하여 .nav > ul > li와 .submenu 클래스를 가진 모든 요소를 선택하여 mainMenu과 subMenu 변수에 저장합니다.
그리고 forEach() 함수를 사용하여 mainMenu 변수에 저장된 각각의 요소에 대해 mouseover와 mouseout 이벤트를 등록합니다. mouseover 이벤트가 발생하면 subMenu 변수에 저장된 각각의 요소에 대해 style.display 속성을 "block"으로 설정하여 하위 메뉴를 보여줍니다. mouseout 이벤트가 발생하면 style.display 속성을 "none"으로 설정하여 하위 메뉴를 숨깁니다.
완성된 페이지
