웹디자인기능사) 메뉴 가로 유형 M-1

웹디자인 기능사 메뉴 유형 : M-1

주어진 코드는 jQuery를 사용하여 간단한 네비게이션 메뉴의 드롭다운 효과를 구현하는 것입니다. 코드를 각 줄마다 설명하겠습니다.

1. jQuery 라이브러리를 CDN을 통해 로드합니다.

이 코드가 있어야 jQuery를 사용할 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

2. JavaScript 코드를 작성하기 위한 <script> 태그가 시작됩니다.

 <script></script>

3. $(function () { … });

jQuery의 $(document).ready() 단축 형식입니다.
페이지가 완전히 로드되면 코드 블록 안의 내용이 실행됩니다.

$(function () {});

4. $(“.nav>ul>li”).mouseover(function () { … });

네비게이션 메뉴의 각 항목에 마우스가 올라가면 발생하는 이벤트입니다.
$(“.nav>ul>li”)는 클래스가 “nav”인 요소의 하위 <ul> 안의 <li> 요소를 선택합니다.
.mouseover()는 마우스가 요소 위에 올라갔을 때 발생하는 이벤트를 처리합니다.

$(".nav>ul>li").mouseover(function () {

5. $(this).find(“.submenu”).stop().slideDown();

현재 마우스가 올라간 메뉴 아이템의 하위 요소 중 클래스가 “submenu”인 요소를 찾아서 슬라이드 다운 애니메이션을 적용합니다. $(this)는 이벤트가 발생한 요소, 즉 마우스가 올라간 메뉴 아이템을 나타냅니다.
.find(“.submenu”)는 그 하위 요소 중 클래스가 “submenu”인 요소를 선택합니다.
.stop()은 현재 진행 중인 모든 애니메이션을 중지합니다.

$(this).find(".submenu").stop().slideDown();

6. $(“.nav>ul>li”).mouseout(function () { … });

네비게이션 메뉴의 각 항목에서 마우스가 벗어나면 발생하는 이벤트입니다. $(“.nav>ul>li”)는 클래스가 “nav”인 요소의 하위 <ul> 안의 <li> 요소를 선택합니다. .mouseout()는 마우스가 요소에서 벗어났을 때 발생하는 이벤트를 처리합니다.

$(".nav>ul>li").mouseout(function () {

7. $(this).find(“.submenu”).stop().slideUp();

현재 마우스가 벗어난 메뉴 아이템의 하위 요소 중 클래스가 “submenu”인 요소를 찾아서 슬라이드 업 애니메이션을 적용합니다.

$(this).find(".submenu").stop().slideUp();

이렇게 작성된 코드는 간단하게 네비게이션 메뉴의 드롭다운 효과를 구현하며, 마우스 이벤트에 따라 해당 애니메이션을 적용합니다.