HTML, CSS, and jQuery: Make an Accordion Menu with Animated Effects-JS Tutorial-php.cn

HTML, CSS, and jQuery: Make an Accordion Menu with Animated Effects

PHPz

Release： 2023-10-26 12:54:25

Original

1159 people have browsed it

HTML, CSS, and jQuery: Make an Accordion Menu with Animated Effects

HTML, CSS and jQuery: Make a folding menu with animated effects

[Introduction]
The folding menu is a common interaction in modern web design element, which can effectively save page space while providing a better user experience. This article will introduce how to use HTML, CSS and jQuery to create a folding menu with animated effects, and provide specific code examples.

[Step 1: HTML structure]
First, we need to build a basic HTML structure. The following is a simple example:

<!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>

Copy after login

[Step 2: CSS Styles]
Next, add styles in the styles.css file. Design the appearance of the menu according to personal preferences. The following is a simple example:

.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;
}

Copy after login

[Step 3: jQuery animation effects]
Finally, we use jQuery to achieve the menu's folding and expanding animation effects. Create a new file named script.js and add the following code:

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

Copy after login

The above code uses jQuery's .slideToggle() method to switch the display and hidden state of the submenu. At the same time, use the .toggleClass() method to add or remove a class named "active" for the clicked menu item. We can use CSS to define the style of the menu item when it is selected.

[Conclusion]
By using HTML, CSS and jQuery, we successfully created a folding menu with animated effects. When users click on menu items, submenus expand or collapse smoothly, providing a better user experience. This simple and practical menu can be applied to various web design and development projects to help improve user interaction experience.

[Appendix: Complete Code]
Please paste the following code in the corresponding file:

HTML file (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>

Copy after login

CSS file (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;
}

Copy after login

JavaScript file (script.js):

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

Copy after login

The above are detailed steps and code examples for using HTML, CSS and jQuery to create a folding menu with animated effects. I hope this article is helpful to you. Through this simple example, you can further explore more interactive elements and effects in web design and development.

The above is the detailed content of HTML, CSS, and jQuery: Make an Accordion Menu with Animated Effects. For more information, please follow other related articles on the PHP Chinese website!