Bagaimana untuk membuat navigasi menegak responsif menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk membuat navigasi menegak responsif

Menu navigasi adalah salah satu bahagian penting laman web . Pengguna disediakan dengan fungsi untuk menyemak imbas dan menavigasi tapak web. Bagaimana untuk membuat navigasi menegak responsif yang boleh menyesuaikan diri dengan saiz skrin dan peranti yang berbeza telah menjadi masalah yang mesti diselesaikan. Dalam artikel ini, saya akan menunjukkan kepada anda cara membuat navigasi menegak responsif menggunakan HTML, CSS dan jQuery.

Pertama, kita perlu mencipta struktur HTML asas yang mengandungi kontena dan item menu menu navigasi. Kami menggunakan teg <nav></nav> sebagai bekas untuk menu navigasi dan teg <ul></ul> dan <li> untuk buat item menu kami. Kodnya adalah seperti berikut: <nav></nav>标签作为导航菜单的容器，使用<ul></ul>和<li>标签来创建我们的菜单项。代码如下：

<nav class="vertical-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

接下来，我们将使用CSS来设置导航菜单的样式。我们需要设置导航菜单的宽度、背景颜色、文字颜色等。同时，为了实现垂直排列的效果，我们还需要设置菜单项的宽度和高度。代码如下：

.vertical-nav {
  width: 200px;
  background-color: #f1f1f1;
}

.vertical-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.vertical-nav li {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.vertical-nav a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 20px;
}

.vertical-nav a:hover {
  background-color: #ccc;
  color: #fff;
}

现在，我们已经完成了基本的垂直导航菜单的制作。接下来，我们将使用jQuery来实现菜单项的响应式效果。

首先，我们需要在HTML中引入jQuery的库文件。你可以在jQuery的官方网站上下载最新版本的库文件，并在HTML中使用<script></script>标签引入。代码如下：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然后，我们将使用jQuery来添加点击事件，当菜单项被点击时，展开或收起子菜单。代码如下：

$(document).ready(function() {
  $('.vertical-nav li').click(function() {
    $(this).find('ul').slideToggle();
  });
});

在上述代码中，我们首先使用$(document).ready()函数来确保文档加载完毕后再执行jQuery代码。然后，我们使用.click()函数将点击事件绑定到菜单项上。当菜单项被点击时，我们使用.slideToggle()函数来显示或隐藏子菜单。

最后，我们还可以使用CSS媒体查询来实现导航菜单的响应式效果。当屏幕宽度小于一定值时，我们可以将导航菜单隐藏起来，使用一个按钮来展开或收起菜单。代码如下：

@media (max-width: 768px) {
  .vertical-nav {
    display: none;
  }

  .vertical-nav.toggle {
    display: block;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .vertical-nav.toggle:before {
    content: "0c9";
    font-family: FontAwesome;
    font-size: 20px;
  }

  .vertical-nav.toggle.active:before {
    content: "00d";
  }
}

在上述代码中，我们使用@media (max-width: 768px)rrreee

Seterusnya, kami akan menggunakan CSS untuk menggayakan menu navigasi. Kita perlu menetapkan lebar, warna latar belakang, warna teks, dll. menu navigasi. Pada masa yang sama, untuk mencapai kesan susunan menegak, kita juga perlu menetapkan lebar dan ketinggian item menu. Kodnya adalah seperti berikut:

rrreee

Kini, kami telah menyelesaikan penghasilan menu navigasi menegak asas. Seterusnya, kami akan menggunakan jQuery untuk menjadikan item menu responsif. #🎜🎜##🎜🎜#Pertama sekali, kita perlu memperkenalkan fail perpustakaan jQuery ke dalam HTML. Anda boleh memuat turun versi terkini fail perpustakaan daripada tapak web rasmi jQuery dan memperkenalkannya dalam HTML menggunakan teg <script></script>. Kodnya adalah seperti berikut: #🎜🎜#rrreee#🎜🎜# Kemudian, kami akan menggunakan jQuery untuk menambah acara klik untuk mengembangkan atau meruntuhkan submenu apabila item menu diklik. Kodnya adalah seperti berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mula-mula menggunakan fungsi $(document).ready() untuk memastikan dokumen dimuatkan sebelum melaksanakan kod jQuery. Kemudian, kami menggunakan fungsi .click() untuk mengikat acara klik pada item menu. Apabila item menu diklik, kami menggunakan fungsi .slideToggle() untuk menunjukkan atau menyembunyikan submenu. #🎜🎜##🎜🎜#Akhir sekali, kami juga boleh menggunakan pertanyaan media CSS untuk mencapai kesan responsif pada menu navigasi. Apabila lebar skrin lebih kecil daripada nilai tertentu, kami boleh menyembunyikan menu navigasi dan menggunakan butang untuk mengembangkan atau meruntuhkan menu. Kodnya adalah seperti berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan @media (max-width: 768px) untuk mewakili gaya apabila lebar skrin kurang daripada 768 piksel. Dalam pertanyaan media ini, kami menyembunyikan menu navigasi dan menambah butang untuk mengembangkan atau meruntuhkan menu. Kami juga menggunakan pustaka ikon FontAwesome untuk memaparkan ikon "+" atau "-" untuk menunjukkan keadaan menu yang dikembangkan atau diruntuhkan. #🎜🎜##🎜🎜#Pada ketika ini, kami telah menyelesaikan pengeluaran menu navigasi menegak responsif. Melalui gabungan HTML, CSS dan jQuery, kami menyedari kesan pengembangan atau keruntuhan item menu, dan menyediakan butang menu responsif apabila lebar skrin kurang daripada nilai tertentu. Anda boleh melaraskan dan memanjangkan kod untuk memenuhi keperluan reka bentuk dan fungsi yang berbeza. #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk membuat navigasi menegak responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!