HTML, CSS 및 jQuery: 탐색 메뉴 드롭다운 애니메이션 효과 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 탐색 메뉴 드롭다운 애니메이션 효과 만들기

WBOY

풀어 주다： 2023-10-27 15:22:44

원래의

1145명이 탐색했습니다.

HTML, CSS 및 jQuery: 탐색 메뉴 드롭다운 애니메이션 효과 만들기

웹 개발에서 매력적인 페이지 효과는 사용자의 웹사이트 호감도를 높이고 사용자 경험을 향상시킬 수 있습니다. 그 중 메뉴 탐색은 웹사이트의 일반적인 요소 중 하나입니다. 애니메이션 효과를 추가하여 메뉴의 상호작용 효과를 높이고 웹사이트를 더욱 생생하게 만들 수 있습니다.

이 기사에서는 HTML, CSS 및 jQuery를 사용하여 드롭다운 애니메이션 효과가 있는 탐색 메뉴를 만듭니다. 다음 단계를 통해 이러한 기술을 사용하여 멋진 탐색 메뉴를 만드는 방법을 배우게 됩니다.

1단계: HTML 구조

먼저 기본 HTML 구조를 만들어야 합니다. body 태그 안에 nav 요소를 추가하고 class 속성이 있는 ul 요소를 메뉴 컨테이너로 설정한 다음 그 안에 몇 가지 li 요소를 메뉴 옵션으로 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>导航菜单下拉动画效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">产品</a>
                <ul class="submenu">
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li><a href="#">产品3</a></li>
                </ul>
            </li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>

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

로그인 후 복사

2단계: CSS 스타일

이제 CSS 스타일을 추가하여 메뉴의 모양과 애니메이션 효과를 설정해 보겠습니다. 먼저 ul.menu的样式，使其具有水平排列的菜单项，并设置其子元素ul.submenu를 숨겨진 상태로 설정합니다. 그런 다음 가상 클래스 선택기:hover를 추가하여 마우스를 가리키면 드롭다운 애니메이션 효과를 설정합니다.

ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

ul.menu li {
    position: relative;
    padding: 10px;
    background-color: #f7f7f7;
}

ul.menu li:hover ul.submenu {
    display: block;
}

ul.menu li ul.submenu {
    display: none;
    list-style: none;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f7f7f7;
}

ul.menu li ul.submenu li {
    padding: 10px;
}

ul.menu li ul.submenu li:hover {
    background-color: #e1e1e1;
}

로그인 후 복사

3단계: jQuery 상호 작용

마지막으로 jQuery를 사용하여 드롭다운 애니메이션 효과를 설정합니다. .slideToggle() 메서드를 사용하면 메뉴 항목 위에 마우스를 올리면 해당 하위 메뉴가 확장되거나 축소됩니다.

$(document).ready(function(){
    $(".menu li").hover(function(){
        $(this).find("ul.submenu").slideToggle("fast");
    });
});

로그인 후 복사

위 코드는 jQuery의 .hover() 메서드를 사용하여 마우스가 .menu li 요소 위에 있을 때 해당 함수를 실행합니다. 함수 내에서 .find() 메서드를 사용하여 해당 ul.submenu 요소를 찾고, .slideToggle() 메서드를 사용하여 하위 메뉴를 확장하거나 축소합니다.

이 시점에서 탐색 메뉴 드롭다운 애니메이션 효과 제작이 완료되었습니다. 필요에 따라 메뉴 스타일을 수정하고 더 많은 하위 메뉴 항목과 스타일을 추가할 수 있습니다.

요약

HTML, CSS, jQuery를 사용하여 드롭다운 애니메이션 효과가 있는 탐색 메뉴를 만들었습니다. 이 애니메이션 효과는 사용자에게 더욱 풍부한 상호 작용 경험을 제공하고 웹 사이트의 품질과 매력을 향상시킬 수 있습니다.

이 예제를 통해 HTML, CSS 및 jQuery 간의 협력과 이러한 기술을 사용하여 멋진 페이지 효과를 만드는 방법에 대해 깊이 이해할 수 있습니다. 이 글이 여러분의 웹 개발 학습과 실습에 도움이 되기를 바랍니다.

위 내용은 HTML, CSS 및 jQuery: 탐색 메뉴 드롭다운 애니메이션 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!