实现一个nav导航栏菜单

“蓬蒿人”

于 2023-09-23 18:41:17 发布

阅读量767

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/challenge_study/article/details/133213752

版权

在开发后台管理系统中，经常会遇上的一个导航菜单，就是点击了左侧的主菜单后，需要自动生成一个顶部nav导航栏菜单，根据点击的先后顺序，自动添加在顶部的nav导航栏菜单中，当导航栏菜单数量过多时，可以实现左右的拖动，寻找自己需要进入的菜单标签。

1.基本布局（我这里使用原生的html/css/js做的示例演示）

布局肯定就是一个大盒子，盒子里面包含了每一个导航栏菜单的标签，我这里因为是做示例代码，所以在外部又包了一层div，并且增加了2个按钮，用来模拟添加导航栏菜单和关闭导航栏菜单。

  <div class="content">
    <div class="nav">
      <!-- <div class="item">页面1</div> -->
    </div>
    <div class="btn">
      <button class="increament">加nav</button>
      <button class="decreament">减nav</button>
    </div>
  </div>

2.样式修改

导航栏菜单一般都是横穿了整个剩余屏幕的，所以我这里使用了flex布局，整个导航栏菜单区域，我设置了一个15px的缩进，每一个导航栏菜单都有一个5px的间距。
为了实现导航栏菜单的左右拖动，就需要设置一下整个导航栏菜单区域的overflow-x:overlay,使用overlay是为了让滚动条出现时不会挤压整个导航栏菜单区域，同时，导航栏菜单是不需要出现上下滚动的滚动条的，所以还要设置一下overflow-y:hidden
可以拖动以后，但是会出现一个左右拖动的滚动条，在实际项目中肯定是不能有这个滚动条的，所以还要设置一下滚动条的宽度为0，::webkit-scrollbar{width:0px;}

.content .nav {
  width: 1000px;
  height: 34px;
  padding: 0 15px;
  background-color: pink;

  display: flex;
  align-items: center;

  overflow-x: overlay;
  /* overflow-y: hidden; */
  white-space: nowrap;
}

.content .nav .item{
  height: 24px;
  margin-right: 5px;
  background-color: skyblue;
  font-size: 12px;
  line-height: 24px;
}

::-webkit-scrollbar{
  width: 0px;
}

3.控制添加导航栏菜单时自动滚动效果

在添加导航栏菜单时，一般使用系统过程中都会操作好多的菜单，当导航栏菜单的数量的总宽度超过整个导航栏的宽度时，会自动进行平移，保证最后点击的菜单一定会展示在整个导航栏菜单的区域，而不是隐藏掉，所以就需要每次点击添加导航栏菜单时，获取到需要滚动的宽度，通过js让整个导航栏区域自动滚动到对应位置去。这就需要使用到scrollWith这个属性了.

nav.scrollTo(nav.scrollWidth,0)

完成上面的描述以后，就可以实现一个自动添加并自动滚动动最后一个菜单位置的导航栏的了，当然了，上面只是描述了一下实现的过程和部分代码逻辑，具体的示例请看下面的完整示例代码。

完整示例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="content">
    <div class="nav">
      <!-- <div class="item">页面1</div> -->
    </div>
    <div class="btn">
      <button class="increament">加nav</button>
      <button class="decreament">减nav</button>
    </div>
  </div>
</body>
<script src="./index.js"></script>
</html>

/*
* index.js
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: 100%;
  transform: translateY(300px);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.content .nav {
  width: 1000px;
  height: 34px;
  padding: 0 15px;
  background-color: pink;

  display: flex;
  align-items: center;

  overflow-x: overlay;
  /* overflow-y: hidden; */
  white-space: nowrap;
}

.content .nav .item{
  height: 24px;
  margin-right: 5px;
  background-color: skyblue;
  font-size: 12px;
  line-height: 24px;
}

.content .btn {
  transform: translateY(50px);
}

.content .btn button{
  width: 50px;
  height: 38px;
  border: none;
  border-radius: 4px;
  background-color: #1e75fe;
  color: #fff;
  font-size: 14px;
}

.content .btn button:active{
  background-color: blue;
}

::-webkit-scrollbar{
  width: 0px;
}

//index.js
const nav = document.querySelector('.nav')
const increament = document.querySelector('.increament')
const decreament = document.querySelector('.decreament')

let index = 10
increament.onclick = () => {
  index++
  const div = document.createElement('div')
  div.className = 'item'
  div.innerHTML = `页面${index}`
  nav.appendChild(div)

  nav.scrollTo(nav.scrollWidth,0)
}

decreament.onclick = () => {
  nav.removeChild(document.querySelectorAll('.item')[index-1])
  index--
  nav.scrollTo(nav.scrollWidth,0)
}

const appendChildDiv = () => {
  for (let i = 0; i < index; i++) {
    const div = document.createElement('div')
    div.className = 'item'
    div.innerHTML = `页面${i+1}`
    nav.appendChild(div)
  }
}

appendChildDiv()