How to implement a horizontal scrolling navigation menu layout using HTML and CSS-HTML Tutorial-php.cn

How to implement a horizontal scrolling navigation menu layout using HTML and CSS

王林

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

Original

1278 people have browsed it

How to implement a horizontal scrolling navigation menu layout using HTML and CSS

How to use HTML and CSS to implement a horizontal scrolling navigation menu layout

In web design, the navigation menu is a very important element, which can facilitate users to browse and Navigate the content of the website. The horizontal scrolling navigation menu is a common navigation menu layout that can display more menu items in a limited horizontal space and give users more options. This article will introduce how to use HTML and CSS to implement a horizontal scrolling navigation menu layout, and attach specific code examples.

First, we need to create a basic HTML structure. In the tag, add a <nav></nav> tag to wrap the navigation menu and set a unique ID value. Then, in the <nav></nav> tag, add a <ul></ul> tag to wrap the navigation menu item, and in the <ul></ul> tag Add multiple <li> tags for each menu item. For example:

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

Copy after login

Next, we need to use CSS styles to define the layout and style of the navigation menu. First, set the white-space:nowrap; attribute for the <ul> tag so that the menu items are arranged horizontally on the same line. Then, set the overflow-x:auto; property to achieve a horizontal scrolling effect. Also, set the appropriate height, width, and padding for the <ul> tag, and hide the horizontal scrollbar. For example:

#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） */
}

Copy after login

Next, set the appropriate style for each menu item. For example, you can set the menu item's spacing, font style, background color, and active state style. Also, set appropriate padding and color for <a> tags in menu items for a good user experience. For example:

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

Copy after login

Finally, we need to add some JavaScript code so that the horizontal scrolling navigation menu automatically adapts as the user scrolls. First, we can use the scroll event to monitor the scrolling behavior of the page. Then, use the scrollLeft property to get the horizontal offset of the scroll bar and assign it to the scrollLeft property of the navigation menu. For example:

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

Copy after login

Through the implementation of the above steps, we have successfully created a horizontal scrolling navigation menu layout. Users can scroll the menu horizontally to see more menu items to better browse and navigate the website's content.

To sum up, this article details how to use HTML and CSS to implement a horizontal scrolling navigation menu layout, and provides specific code examples. I hope readers can use this example to understand how to create and customize their own horizontal scrolling navigation menu layout.

The above is the detailed content of How to implement a horizontal scrolling navigation menu layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!