-
헤더에 마우스 올리면 depth2와 배경이 내려오는 기능JS 도라에몽 2023. 8. 30. 14:55
헤더에 있는 애들은 depth1,
헤더에 마우스 커서를 올렸을 때 슬라이드든 show든 해서 보이는 애들은 depth2.
header의 배경은 header:after.
:after와 :before는 script에서 선택자로 선택되지 않는다.
$("header:after") -> 이딴 게 전혀 먹히지 않음
그래서 header에 active 클래스를 추가해서
호버했을 땐 active 클래스 추가ㅡ
호버 안 할 땐 active 클래스 삭제를 하는 방식으로 만들었다.
jquery 로 짰을 때
<!DOCTYPE html> <html lang="en"> <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>헤더연습용</title> <!--js--> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> * {box-sizing: border-box; margin: 0; padding: 0; font-size: 14px;} ul, li {list-style: none;} header {position: fixed; top: 0; left: 0; width: 100%; z-index: 2;} .depth1 {width: 100%; display: flex; padding: 0 50px; justify-content: space-between; background-color: bisque; z-index: 2; position: relative;} .depth1 > ul {display: flex;} .depth1 > ul > li {cursor: pointer;} .depth1 > ul > li {width: 120px; line-height: 40px; text-align: center; position: relative; cursor: pointer;;} .depth2 {line-height: 40px; text-align: center; position: absolute; top: 40px; left: 0; width: 100%; display: none;} .depth2 li:hover {color: #fff;} header:after {content: ""; width: 100%; position: absolute; top: 0; left: 0; display:block; background-color: cadetblue; z-index: 1; transition: height 0.3s ease; height: 0px;} header.active:after {height:200px;} </style> </head> <body> <header> <div class="depth1"> <h1>LOGO</h1> <ul> <li>메뉴1 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴2 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴3 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴4 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴5 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> </ul> </div> </header> <script> $(document).ready(function() { $("header").hover(function() { $(".depth2").stop().slideDown(); $(this).stop().addClass('active'); }, function(){ $(".depth2").stop().slideUp(); $(this).stop().removeClass('active'); }); }); </script> </body> </html>바닐라 자바스크립트 (javascript, vanila javascript)로 짰을 때
<!DOCTYPE html> <html lang="en"> <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>헤더연습용</title> <!--js--> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> * {box-sizing: border-box; margin: 0; padding: 0; font-size: 14px;} ul, li {list-style: none;} header {position: fixed; top: 0; left: 0; width: 100%; z-index: 2;} .depth1 {width: 100%; display: flex; padding: 0 50px; justify-content: space-between; background-color: bisque; z-index: 2; position: relative;} .depth1 > ul {display: flex;} .depth1 > ul > li {cursor: pointer;} .depth1 > ul > li {width: 120px; line-height: 40px; text-align: center; position: relative; cursor: pointer;;} .depth2 {line-height: 40px; text-align: center; position: absolute; top: 40px; left: 0; width: 100%; display: none;} .depth2 li:hover {color: #fff;} header:after {content: ""; width: 100%; position: absolute; top: 0; left: 0; display:block; background-color: cadetblue; z-index: 1; transition: height 0.3s ease; height: 0px;} header.active:after {height:200px;} </style> </head> <body> <header> <div class="depth1"> <h1>LOGO</h1> <ul> <li>메뉴1 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴2 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴3 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴4 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> <li>메뉴5 <ul class="depth2"> <li>depth2 메뉴1</li> <li>depth2 메뉴2</li> <li>depth2 메뉴3</li> <li>depth2 메뉴4</li> </ul> </li> </ul> </div> </header> <script> //vanila script document.addEventListener('DOMContentLoaded', function() { var header = document.querySelector('header'); var depth2 = document.querySelectorAll('.depth2'); header.addEventListener('mouseenter', function() { depth2.forEach(function(item) { item.style.display = 'block'; }); this.classList.add('active'); }); header.addEventListener('mouseleave', function() { depth2.forEach(function(item) { item.style.display = 'none'; }); this.classList.remove('active'); }); }); </script> </body> </html>제이쿼리가 훨씬 낫다...
'JS 도라에몽' 카테고리의 다른 글
자바스크립트 변수 (0) 2023.08.31 태그의 내용 텍스트 바꾸기 (0) 2023.08.30 비주얼스튜디오코드에서 내가 원하는 브라우저로 라이브서버 열기 (0) 2023.07.05 마우스 드래그로 좌우 너비 바꾸기 (0) 2023.07.05 자바스크립트 형변환 (0) 2023.07.05