Bagaimana untuk melaksanakan susun atur menu navigasi menatal mendatar menggunakan HTML dan CSS-html tutorial-php.cn

Bagaimana untuk melaksanakan susun atur menu navigasi menatal mendatar menggunakan HTML dan CSS

王林

Lepaskan： 2023-10-24 08:09:40

asal

1279 orang telah melayarinya

Bagaimana untuk melaksanakan susun atur menu navigasi menatal mendatar menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur menu navigasi menatal mendatar

Dalam reka bentuk web, menu navigasi adalah elemen yang sangat penting, yang boleh memudahkan pengguna untuk melayari dan melayari kandungan laman web. Menu navigasi menatal mendatar ialah susun atur menu navigasi biasa yang boleh memaparkan lebih banyak item menu dalam ruang mendatar yang terhad dan memberi pengguna lebih banyak pilihan. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan susun atur menu navigasi menatal mendatar dan melampirkan contoh kod tertentu.

Pertama, kita perlu mencipta struktur HTML asas. Dalam teg , tambahkan teg <nav></nav> untuk membalut menu navigasi dan menetapkan nilai ID unik. Kemudian, dalam teg <nav></nav>, tambahkan teg <ul></ul> untuk membalut item menu navigasi dan tambahkannya dalam <ul> </ul> >Tambah berbilang teg <li> untuk setiap item menu. Contohnya: 标签中，添加一个<nav></nav>标签用于包裹导航菜单，并设置一个唯一的ID值。然后，在<nav></nav>标签中，添加一个<ul></ul>标签用于包裹导航菜单项，并在<ul></ul>标签中添加多个<li>标签作为每个菜单项。例如：

<body>
  <nav id="scroll-menu">
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#portfolio">作品集</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
</body>

Salin selepas log masuk

接下来，我们需要使用CSS样式来定义导航菜单的布局和样式。首先，为<ul>标签设置white-space:nowrap;属性，使菜单项水平排列在同一行上。然后，设置overflow-x:auto;属性，以实现水平滚动效果。同时，为<ul>标签设置适当的高度、宽度和内边距，以及隐藏水平滚动条。例如：

#scroll-menu ul {
  white-space: nowrap;
  overflow-x: auto;
  height: 60px;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  scrollbar-width: none; /* 隐藏滚动条（适用于现代浏览器） */
  -ms-overflow-style: none; /* 隐藏滚动条（适用于IE和Edge） */
}

#scroll-menu ul::-webkit-scrollbar {
  display: none; /* 隐藏滚动条（适用于Chrome、Safari和Opera） */
}

Salin selepas log masuk

接着，为每个菜单项设置合适的样式。例如，可以设置菜单项的间距、字体样式、背景颜色和激活状态的样式。同时，为菜单项中的<a>标签设置适当的内边距和颜色，以实现良好的用户体验。例如：

#scroll-menu ul li {
  display: inline-block;
  margin: 10px;
}

#scroll-menu ul li a {
  padding: 10px;
  color: #333;
  text-decoration: none;
}

#scroll-menu ul li a:hover {
  color: #fff;
  background-color: #333;
}

Salin selepas log masuk

最后，我们需要添加一些JavaScript代码，以使水平滚动导航菜单在用户滚动时能够自动适应。首先，我们可以使用scroll事件来监听页面的滚动行为。然后，使用scrollLeft属性来获取滚动条的水平偏移量，并将其赋值给导航菜单的scrollLeft

window.addEventListener('scroll', function() {
  var scrollMenu = document.getElementById('scroll-menu');
  scrollMenu.scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
});

Salin selepas log masuk

Seterusnya, kita perlu menggunakan gaya CSS untuk menentukan reka letak dan gaya menu navigasi. Mula-mula, tetapkan atribut white-space:nowrap; untuk teg <ul></ul> supaya item menu disusun secara mendatar pada baris yang sama. Kemudian, tetapkan atribut overflow-x:auto; untuk mencapai kesan tatal mendatar. Selain itu, tetapkan ketinggian, lebar dan pelapik yang sesuai untuk teg <ul></ul> dan sembunyikan bar skrol mendatar. Contohnya:

rrreee

Seterusnya, tetapkan gaya yang sesuai untuk setiap item menu. Sebagai contoh, anda boleh menetapkan jarak item menu, gaya fon, warna latar belakang dan gaya keadaan aktif. Selain itu, tetapkan pelapik dan warna yang sesuai untuk teg <a> dalam item menu untuk mencapai pengalaman pengguna yang baik. Contohnya:

rrreee

Akhir sekali, kami perlu menambah beberapa kod JavaScript supaya menu navigasi menatal mendatar menyesuaikan secara automatik semasa pengguna menatal. Mula-mula, kita boleh menggunakan acara scroll untuk memantau kelakuan menatal halaman. Kemudian, gunakan sifat scrollLeft untuk mendapatkan offset mendatar bar skrol dan tetapkan pada sifat scrollLeft pada menu navigasi. Contohnya: 🎜rrreee🎜Melalui pelaksanaan langkah di atas, kami telah berjaya mencipta susun atur menu navigasi menatal mendatar. Pengguna boleh menatal menu secara mendatar untuk melihat lebih banyak item menu untuk menyemak imbas dan menavigasi kandungan tapak web dengan lebih baik. 🎜🎜Ringkasnya, artikel ini memperincikan cara menggunakan HTML dan CSS untuk melaksanakan susun atur menu navigasi menatal mendatar dan menyediakan contoh kod khusus. Saya harap pembaca boleh menggunakan contoh ini untuk memahami cara membuat dan menyesuaikan susun atur menu navigasi menatal mendatar mereka sendiri. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur menu navigasi menatal mendatar menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!