HTML, CSS dan jQuery: Buat Menu Akordion dengan Kesan Animasi-tutorial js-php.cn

HTML, CSS dan jQuery: Buat Menu Akordion dengan Kesan Animasi

PHPz

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

asal

1158 orang telah melayarinya

HTML, CSS dan jQuery: Buat Menu Akordion dengan Kesan Animasi

HTML, CSS dan jQuery: Buat menu lipat dengan kesan khas animasi

[Pengenalan]
Menu lipat ialah elemen interaktif biasa dalam reka bentuk web moden dengan berkesan dapat menjimatkan ruang halaman sambil memberikan pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta menu lipat dengan kesan animasi, dan menyediakan contoh kod khusus.

【Langkah 1: Struktur HTML】
Pertama, kita perlu membina struktur HTML asas. Berikut ialah contoh mudah:

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

Salin selepas log masuk

[Langkah 2: Gaya CSS]
Seterusnya, tambahkan gaya dalam fail styles.css. Reka bentuk penampilan menu mengikut keutamaan peribadi Berikut ialah contoh mudah:

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

Salin selepas log masuk

[Langkah 3: kesan animasi jQuery]
Akhir sekali, kami menggunakan jQuery untuk mencapai kesan animasi lipatan dan pengembangan menu. Cipta fail baharu bernama script.js dan tambah kod berikut:

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

Salin selepas log masuk

Kod di atas menggunakan kaedah .slideToggle() jQuery untuk menukar paparan dan keadaan tersembunyi submenu. Pada masa yang sama, gunakan kaedah .toggleClass() untuk menambah atau mengalih keluar kelas bernama "aktif" untuk item menu yang diklik. Kita boleh menggunakan CSS untuk menentukan gaya item menu apabila ia dipilih.

【Kesimpulan】
Dengan menggunakan HTML, CSS dan jQuery, kami berjaya mencipta menu boleh lipat dengan kesan animasi. Apabila pengguna mengklik pada item menu, submenu berkembang atau runtuh dengan lancar, memberikan pengalaman pengguna yang lebih baik. Menu ringkas dan praktikal ini boleh digunakan pada pelbagai reka bentuk web dan projek pembangunan untuk membantu meningkatkan pengalaman interaksi pengguna.

【Lampiran: Kod Lengkap】
Sila tampal kod berikut dalam fail yang sepadan:

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

Salin selepas log masuk

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

Salin selepas log masuk

fail JavaScript) (script.javaScript) :

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

Salin selepas log masuk

Di atas adalah langkah terperinci dan contoh kod untuk menggunakan HTML, CSS dan jQuery untuk mencipta menu lipat dengan kesan animasi. Saya harap artikel ini membantu anda Melalui contoh mudah ini, anda boleh meneroka lebih banyak elemen dan kesan interaktif dalam reka bentuk dan pembangunan web.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat Menu Akordion dengan Kesan Animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!