Rumah > Artikel > hujung hadapan web > Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScript

Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScript

PHPzasal: 2024-08-05 20:56:52742semak imbas

Dalam reka bentuk web moden, menu navigasi merupakan komponen penting yang sangat meningkatkan pengalaman pengguna. Satu reka bentuk yang bergaya dan mesra pengguna ialah menu navigasi slaid masuk. Dalam blog ini, kita akan berjalan melalui penciptaan menu navigasi slaid masuk menggunakan HTML, CSS dan JavaScript. Tutorial ini sesuai untuk pembangun web yang ingin meningkatkan tapak web mereka dengan sistem navigasi yang anggun dan berfungsi.

Harta peralihan dalam css
Sifat peralihan dalam CSS digunakan untuk mencipta animasi yang lancar apabila sifat CSS berubah dari satu keadaan ke keadaan yang lain. Ia membolehkan anda menentukan sifat mana yang harus dianimasikan, tempoh animasi, fungsi pemasaan (bagaimana animasi berlangsung), dan kelewatan sebelum animasi bermula. Berikut ialah pecahan terperinci sifat peralihan dan cara ia digunakan:

Sintaks

transition: property duration timing-function delay;

Komponen

harta: Ini menentukan sifat CSS yang anda mahu animasikan. Anda boleh menganimasikan hampir semua sifat CSS, seperti lebar, tinggi, warna latar belakang, kelegapan, dll. Anda juga boleh menggunakan kata kunci semua untuk menganimasikan semua sifat yang boleh dialihkan.
: Ini mentakrifkan tempoh peralihan perlu diambil. Ia dinyatakan dalam saat (cth., 1s untuk 1 saat) atau milisaat (cth., 500ms untuk 500 milisaat).
fungsi pemasaan: Ini menerangkan cara nilai perantaraan peralihan dikira. Nilai biasa termasuk:

linear: Peralihan adalah genap dari awal hingga akhir.
kemudahan: Peralihan bermula perlahan, kemudian dipercepatkan, dan kemudian perlahan semula (nilai lalai).
kemudahan masuk: Peralihan bermula perlahan-lahan.
kelonggaran: Peralihan berakhir dengan perlahan.
kemudahan masuk: Peralihan bermula dan berakhir dengan perlahan.
Anda juga boleh menentukan fungsi pemasaan tersuai menggunakan fungsi cubic-bezier.

kelewatan: Ini mentakrifkan tempoh menunggu sebelum memulakan peralihan. Seperti tempoh, ia ditentukan dalam saat atau milisaat. Nilai lalai ialah 0s (tiada kelewatan).

Pertama, mari kita mulakan dengan struktur HTML. Ini akan menentukan elemen yang diperlukan untuk menu slaid masuk kami.(Baca Lagi)
Keluaran:

Creating a Slide-In Navigation Menu with HTML, CSS, and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-in Navigation Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Menu Toggle Button -->
<button onclick="toggleMenu()">Toggle Menu</button>

<!-- Navigation Menu -->
<div class="menu" id="menu">
    <a href="#" class="menu-item">Home</a>
    <a href="#" class="menu-item">About</a>
    <a href="#" class="menu-item">Services</a>
    <a href="#" class="menu-item">Contact</a>
    <a href="#" class="menu-item" onclick="closeMenu()">Close</a>
</div>

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

Seterusnya, mari tambah CSS untuk menggayakan menu dan mengawal tingkah laku gelongsornya. Cipta fail bernama styles.css dan tambah gaya berikut:

.menu {
    position: fixed;
    top: 0;
    left: -250px; /* Initially off-screen */
    height: 100%;
    width: 250px; /* Adjust as needed */
    background-color: #ee3646;
    transition: left 0.3s ease; /* Only transition the left property */
    z-index: 1000; /* Ensure it's above other content */
}

.menu.active {
    left: 0; /* Slide the menu into view */
}

/* Example styling for menu items */
.menu-item {
    padding: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
}

Sekarang, mari tambah JavaScript untuk mengendalikan tingkah laku gelongsor menu. Buat fail bernama script.js dan tambah kod berikut:

function toggleMenu() {
    const menu = document.getElementById('menu');
    menu.classList.toggle('active');
}

function closeMenu() {
    const menu = document.getElementById('menu');
    menu.classList.remove('active');
}

Inilah yang JavaScript lakukan:

toggleMenu(): Fungsi ini menogol kelas aktif pada menu, menyebabkan ia meluncur masuk dan keluar dari pandangan.
closeMenu(): Fungsi ini mengalih keluar kelas aktif daripada menu, memastikan ia meluncur keluar daripada paparan apabila pautan tutup diklik.

Menyatukan Semuanya
Untuk melihat menu navigasi slaid masuk dalam tindakan, pastikan ketiga-tiga fail (index.html, styles.css, script.js) berada dalam direktori yang sama dan buka index.html dalam penyemak imbas web. Mengklik butang "Togol Menu" seharusnya meluncur dengan lancar menu ke paparan dari kiri. Mengklik pautan "Tutup" dalam menu harus meluncurkannya kembali keluar dari paparan.

Kesimpulan
Mencipta menu navigasi slaid masuk dengan HTML, CSS dan JavaScript ialah proses mudah yang boleh meningkatkan pengalaman pengguna di tapak web anda dengan ketara. Dengan bereksperimen dengan gaya, animasi dan fungsi yang berbeza, anda boleh mencipta navigasi yang unik dan mesra pengguna untuk keperluan tapak web anda.

Baca artikel penuh- Menguasai Seni Harta Terjemahan CSS

Atas ialah kandungan terperinci Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html define for include Directory using class Property JS function default this background transition animation

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mempelajari Pembolehubah CSS dengan freeCodeCampArtikel seterusnya：Mempelajari Pembolehubah CSS dengan freeCodeCamp

Artikel berkaitan

Lihat lagi