HTML, CSS 및 jQuery: 애니메이션 효과로 아코디언 메뉴 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 애니메이션 효과로 아코디언 메뉴 만들기

PHPz

풀어 주다： 2023-10-26 12:54:25

원래의

1165명이 탐색했습니다.

HTML, CSS 및 jQuery: 애니메이션 효과로 아코디언 메뉴 만들기

HTML, CSS 및 jQuery: 애니메이션 특수 효과가 포함된 접기 메뉴 만들기

[소개]
접기 메뉴는 현대 웹 디자인의 일반적인 대화형 요소로 페이지 공간을 효과적으로 절약하는 동시에 더 나은 사용자 경험을 제공할 수 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 애니메이션 효과가 포함된 접기 메뉴를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

【1단계: HTML 구조】
먼저 기본 HTML 구조를 구축해야 합니다. 다음은 간단한 예입니다.

<!DOCTYPE html>
<html>
<head>
    <title>折叠菜单示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="menu">
        <div class="item">
            <h2 class="title">菜单项 1</h2>
            <ul class="sub-menu">
                <li>子菜单项 1</li>
                <li>子菜单项 2</li>
                <li>子菜单项 3</li>
            </ul>
        </div>
        <div class="item">
            <h2 class="title">菜单项 2</h2>
            <ul class="sub-menu">
                <li>子菜单项 1</li>
                <li>子菜单项 2</li>
                <li>子菜单项 3</li>
            </ul>
        </div>
        <!-- 更多菜单项... -->
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

[2단계: CSS 스타일]
다음으로 styles.css 파일에 스타일을 추가합니다. 개인 취향에 따라 메뉴의 모양을 디자인합니다. 다음은 간단한 예입니다.

.menu {
    width: 200px;
    background-color: #f0f0f0;
}

.item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.title {
    margin: 0;
}

.sub-menu {
    display: none;
    padding-left: 20px;
}

.sub-menu li {
    margin-bottom: 5px;
}

로그인 후 복사

[3단계: jQuery 애니메이션 효과]
마지막으로 jQuery를 사용하여 메뉴의 접기 및 확장 애니메이션 효과를 구현합니다. script.js라는 새 파일을 만들고 다음 코드를 추가합니다.

$(document).ready(function() {    
    $('.item').click(function() {
        $(this).children('.sub-menu').slideToggle();
        $(this).toggleClass('active');
    });
});

로그인 후 복사

위 코드는 jQuery의 .slideToggle() 메서드를 사용하여 하위 메뉴의 표시 및 숨김 상태를 전환합니다. 동시에 .toggleClass() 메서드를 사용하여 클릭한 메뉴 항목에 대해 "active"라는 클래스를 추가하거나 제거합니다. CSS를 사용하여 메뉴 항목이 선택될 때 스타일을 정의할 수 있습니다.

【결론】
HTML, CSS, jQuery를 사용하여 애니메이션 효과가 포함된 축소 가능한 메뉴를 만드는 데 성공했습니다. 사용자가 메뉴 항목을 클릭하면 하위 메뉴가 원활하게 확장되거나 축소되어 더 나은 사용자 경험을 제공합니다. 이 간단하고 실용적인 메뉴는 다양한 웹 디자인 및 개발 프로젝트에 적용되어 사용자 상호 작용 경험을 향상시키는 데 도움이 됩니다.

【부록: 전체 코드】
해당 파일에 다음 코드를 붙여넣으세요:

HTML 파일(index.html):

<!DOCTYPE html>
<html>
<head>
    <title>折叠菜单示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="menu">
        <div class="item">
            <h2 class="title">菜单项 1</h2>
            <ul class="sub-menu">
                <li>子菜单项 1</li>
                <li>子菜单项 2</li>
                <li>子菜单项 3</li>
            </ul>
        </div>
        <div class="item">
            <h2 class="title">菜单项 2</h2>
            <ul class="sub-menu">
                <li>子菜单项 1</li>
                <li>子菜单项 2</li>
                <li>子菜单项 3</li>
            </ul>
        </div>
        <!-- 更多菜单项... -->
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

CSS 파일(styles.css):

.menu {
    width: 200px;
    background-color: #f0f0f0;
}

.item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.title {
    margin: 0;
}

.sub-menu {
    display: none;
    padding-left: 20px;
}

.sub-menu li {
    margin-bottom: 5px;
}

로그인 후 복사

JavaScript 파일(script.js) :

$(document).ready(function() {    
    $('.item').click(function() {
        $(this).children('.sub-menu').slideToggle();
        $(this).toggleClass('active');
    });
});

로그인 후 복사

위 내용은 HTML, CSS, jQuery를 사용하여 애니메이션 효과가 포함된 접기 메뉴를 만드는 자세한 단계와 코드 예제입니다. 이 기사가 여러분에게 도움이 되기를 바랍니다. 이 간단한 예제를 통해 웹 디자인 및 개발에 있어 더 많은 대화형 요소와 효과를 탐색할 수 있습니다.

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