Cipta reka bentuk responsif dengan menu navigasi sisi gelongsor

Dalam tutorial ini, anda akan mencipta menu navigasi sisi yang boleh dikembangkan menggunakan JavaScript dan CSS. Produk akhir ditunjukkan di bawah:

1. Cipta tanda

Mula-mula, mari tambahkan beberapa penanda pada menu sampingan:

<div id="sideNavigation" class="sidenav">
  <a href="#" class="close-btn">&times;</a>
  <a href="#">About</a>
  <a href="#">Features</a>
  <a href="#">Contact Us</a>
</div>
 
<nav class="topnav">
  <a href="#" class="ham-icon">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
 
<section id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

Di sini anda dapat melihat bahawa kami telah mencipta menu sampingan div menggunakan kelas sidenav. Seterusnya, kami menambah navigasi bar teratas sebenar melalui teg <nav> dan kami menggunakan SVG untuk ikon menu sisi. sidenav类创建了一个侧边菜单div。接下来，我们通过 <nav> 标签添加了实际的顶部栏导航，并且我们使用 SVG 作为侧面菜单图标。

请记住将网站的所有内容放入 div id="main" 容器中，以便它向右滑动。

2. 编写 JavaScript 代码

接下来，让我们添加 JavaScript，该 JavaScript 将使用 ham-icon 类侦听汉堡包图标上的单击事件，以及侧面导航菜单滑到屏幕上后出现的关闭按钮。

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

单击汉堡包图标应该会显示侧面导航。我们通过将导航的宽度设置为 250px 并同时向主网站内容添加 250px 的左边距来实现此目的。

单击关闭按钮应该会隐藏侧面导航。为此，我们将导航的宽度更改回 0，同时将主网站内容的左边距设置为 0。

3. 使用 CSS 样式

最后，我们需要使用一些 CSS 来设置侧边菜单和链接的页面样式。 CSS 会将所有网页元素正确放置在我们想要的位置。我们还将在 transition 属性的帮助下应用一些简单的动画。让我们一次看一下 CSS 的一部分。

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 4rem;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  font-family: "Bebas Neue";
}

.sidenav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #bdbdbd;
  display: block;
  transition: 0.4s;
  white-space: nowrap;
  font-size: 2rem;
}

.sidenav a:hover {
  color: white;
  background: #9e9e9e;
}

我们将侧边导航的height设置为100%，并将其初始width设置为0以使其隐藏。但是，只有当 overflow-x 属性的值设置为 hidden 时，侧面导航的内容才会保持隐藏。

过渡属性可确保侧面导航宽度的变化不会突然发生，并且缓动功能使其具有一点弹性。

对于侧面导航内的链接，我们将 white-space 属性的值设置为 nowrap，以便菜单文本不会溢出多行。

.sidenav .close-btn {
  position: absolute;
  top: -1rem;
  right: 1rem;
  font-size: 5rem;
}

.sidenav .close-btn:hover {
  background: initial;
  transform: scale(1.2);
}

上面的 CSS 样式将我们的关闭按钮与侧面导航中的其他链接分开。我们对关闭按钮应用了绝对定位，并防止其背景在悬停时变成浅灰色。当用户将鼠标悬停在其上方时，它的大小还会放大 20%。

现在，以下 CSS 将通过使用相同的过渡持续时间和相同的缓动函数来确保主要内容位置的移动与导航菜单同步。将 overflow-x 属性的值设置为 hidden 可确保不会因内容移动而出现水平滚动条。

#main {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
 overflow-x: hidden; 
}

我们还可以借助以下 CSS 为汉堡包图标添加一点旋转运动。它在 0.5 秒的时间内将汉堡包图标旋转 180 度。

a svg {
  transition: all 0.5s ease;
}
a svg:hover {
  transform: rotate(180deg);
}

最后，让我们通过使用以下 CSS 调整链接的间距和大小来使导航菜单具有响应能力。它确保菜单不会在垂直空间较小的屏幕上超出范围。

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

此时您的导航菜单应该类似于以下 CodePen 演示。

4. 移除幻灯片

要使菜单显示时没有幻灯片动画，只需更改 CSS 属性 transition，如下面的缩写形式所示：

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

这将使更改立即出现，因为 transition 中没有指定延迟。我们使用的默认值是 0.5s

Tulis kod JavaScript

Seterusnya, mari tambah JavaScript yang akan menggunakan kelas ham-icon untuk mendengar acara klik pada ikon hamburger, serta butang tutup yang muncul selepas menu navigasi sisi meluncur ke skrin.

Mengklik pada ikon hamburger akan mendedahkan navigasi sisi. Kami melakukan ini dengan menetapkan lebar navigasi kepada 250px dan juga menambahkan margin kiri 250px pada kandungan tapak utama. Mengklik butang tutup akan menyembunyikan navigasi sisi. Untuk melakukan ini, kami menukar lebar navigasi kembali kepada 0, sambil juga menetapkan margin kiri kandungan tapak utama kepada 0.

🎜3.🎜 Gunakan gaya CSS🎜 🎜Akhir sekali, kita perlu menggunakan beberapa CSS untuk menggayakan menu sisi dan pautan pada halaman. CSS akan meletakkan semua elemen halaman web tepat di tempat yang kita inginkan. Kami juga akan menggunakan beberapa animasi ringkas dengan bantuan atribut transition. Mari lihat CSS satu bahagian pada satu masa. 🎜 rrreee 🎜Kami menetapkan ketinggian navigasi sisi kepada 100% dan width awalnya kepada 0 untuk Jadikan ia tersembunyi. Walau bagaimanapun, kandungan navigasi sisi akan kekal tersembunyi hanya jika nilai atribut overflow-x ditetapkan kepada hidden. 🎜 🎜Sifat peralihan memastikan bahawa perubahan dalam lebar navigasi sisi tidak berlaku secara tiba-tiba, dan ciri pelonggaran menjadikannya agak anjal. 🎜 🎜Untuk pautan dalam navigasi sisi, kami menetapkan nilai atribut white-space kepada nowrap supaya teks menu tidak melimpah berbilang baris. 🎜 rrreee 🎜Gaya CSS di atas memisahkan butang tutup kami daripada pautan lain dalam navigasi sisi. Kami menggunakan kedudukan mutlak pada butang tutup dan menghalang latar belakangnya daripada bertukar kelabu muda semasa tuding. Ia juga meningkat dalam saiz sebanyak 20% apabila pengguna menuding di atasnya. 🎜 🎜CSS berikut kini akan memastikan bahawa kedudukan kandungan utama bergerak selari dengan menu navigasi dengan menggunakan tempoh peralihan yang sama dan fungsi pelonggaran yang sama. Menetapkan nilai atribut overflow-x kepada hidden memastikan bar skrol mendatar tidak muncul semasa kandungan bergerak. 🎜 rrreee 🎜Kami juga boleh menambah sedikit pergerakan putaran pada ikon hamburger dengan bantuan CSS berikut. Ia memutar ikon hamburger 180 darjah dalam 0.5 saat. 🎜 rrreee 🎜Akhir sekali, mari jadikan menu navigasi responsif dengan melaraskan jarak dan saiz pautan menggunakan CSS berikut. Ia memastikan bahawa menu tidak terbentang di luar skop pada skrin dengan ruang menegak yang kurang. 🎜 rrreee 🎜Pada ketika ini menu navigasi anda sepatutnya kelihatan seperti demo CodePen di bawah. 🎜 🎜🎜🎜🎜

🎜4.🎜 Alih keluar tayangan slaid🎜 🎜Untuk membuat menu muncul tanpa animasi slaid, cuma tukar sifat CSS transition, seperti yang ditunjukkan dalam borang yang disingkatkan di bawah: 🎜 rrreee 🎜Ini akan menjadikan perubahan muncul serta-merta kerana tiada kelewatan yang dinyatakan dalam transition. Nilai lalai yang kami gunakan ialah 0.5s. 🎜 🎜Kesimpulan🎜 🎜Mencipta menu sampingan hanya memerlukan beberapa baris kod dan tidak memerlukan banyak sumber. Jadikan kod anda responsif kepada resolusi skrin peranti yang berbeza dengan mengubah suai CSS anda dengan menambahkan pertanyaan media untuk kes khusus anda. 🎜 🎜Untuk melangkah lebih jauh, anda mungkin mahu menggunakan rangka kerja CSS seperti Bootstrap atau Bulma untuk menggayakan menu anda. 🎜 🎜🎜Artikel ini telah dikemas kini dengan sumbangan daripada Monty Shokeen. Monty ialah pembangun tindanan penuh yang juga gemar menulis tutorial dan mempelajari perpustakaan JavaScript baharu. 🎜🎜

Atas ialah kandungan terperinci Cipta reka bentuk responsif dengan menu navigasi sisi gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!