vue实现仿DJI大疆官网顶部导航栏组件

页面进入时，导航栏背景色为透明：
鼠标移入时，导航栏背景变白，鼠标停留的标签字体颜色变换，出现底边框，若有二级下拉菜单，则平滑向下弹出菜单：

gitee仓库地址：https://gitee.com/Yuzaki-Nasa/dji-nav

实现导航栏二级从上往下弹出效果：https://blog.csdn.net/vvv3171071/article/details/121002283

导航栏的tab还有点击跳转、点击滚动页面等功能，可自行使用。

最终效果图：

---

DJINav.vue：

<template>
  <!-- 顶部 -->
  <div class="main-top">
    <div class="top-nav">
      <div class="container">
        <!-- 左侧 -->
        <div class="t-left">
          <a href="#">
            <img src="../assets/ui_img/Profile.jpg" alt="" class="nav-logo" />
            <span>XXXXXXXX平台商城</span>
          </a>
        </div>
        <!-- 右侧 -->
        <div class="t-right">
          <ul>
            <li @click="goToGitee">
              <div class="nav-tab">我的gitee</div>
            </li>
            <li @click="goTheDoc">
              <div class="nav-tab">滚动页面</div>
            </li>
            <li>
              <div class="nav-tab">跳转链接</div>
              <ul class="nav-menu">
                <li @click="goToLinks(0)">百度一下</li>
                <li @click="goToLinks(1)">淘宝</li>
                <li @click="goToLinks(2)">京东</li>
                <li @click="goToLinks(3)">鹰角网络</li>
              </ul>
            </li>
            <li>
              <div class="nav-tab">关注我吧</div>
              <ul class="nav-menu">
                <li @click="followMe(0)">CSDN</li>
                <li @click="followMe(1)">知乎</li>
                <li @click="followMe(2)">简书</li>
                <li @click="followMe(3)">哔哩哔哩</li>
              </ul>
            </li>
            <!-- <li @click="goToConsole">
                <div class="nav-tab">控制台</div>
              </li> -->
            <div class="console" @click="goToConsole">
              <div class="btn">控制台</div>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="baner-title">
        <h1>XXXXXXXX平台商城</h1>
        <h3>
          Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介
        </h3>
      </div>
    </div>
    <div style="height: 3000px"></div>
    <div class="documentation module-title">
      这种demo不需要文档，随便点点就玩明白了
    </div>
  </div>
</template>

<script>
export default {
  name: 'DJINav',
  data() {
    return {}
  },
  methods: {
    // 跳转至对应规范标准
    goToLinks(id) {
      switch (id) {
        case 0:
          window.open('https://www.baidu.com/', '_blank')
          break
        case 1:
          window.open('https://www.taobao.com/', '_blank')
          break
        case 2:
          window.open('https://www.jd.com/', '_blank')
          break
        case 3:
          window.open('https://www.hypergryph.com/', '_blank')
          break
        default:
          System.out.println('error')
      }
    },

    // 跳转至对应技术分享
    followMe(id) {
      switch (id) {
        case 0:
          window.open('https://blog.csdn.net/vvv3171071', '_blank')
          break
        case 1:
          window.open(
            'https://www.zhihu.com/people/ling-deng-zao-lang',
            '_blank'
          )
          break
        case 2:
          window.open('https://www.jianshu.com/u/ea92175f1607', '_blank')
          break
        case 3:
          window.open('https://space.bilibili.com/163409', '_blank')
          break
        default:
          System.out.println('error')
      }
    },

    // 跳转至Gitee
    goToGitee() {
      window.open('https://gitee.com/Yuzaki-Nasa/dashboard/projects', '_blank')
    },

    // 跳转至控制台
    goToConsole() {
      window.open('https://gitee.com/Yuzaki-Nasa/dji-nav', '_blank')
    },

    // 页面滚动到产品文档
    goTheDoc() {
      let el = document.getElementsByClassName('documentation')[0]
      this.$nextTick(() => {
        window.scrollTo({ top: el.offsetTop - 500, behavior: 'smooth' })
      })
    }
  }
}
</script>

<style lang="scss">
*,
:after,
:before {
  /* -webkit-box-sizing: inherit; */
  box-sizing: border-box;
}
/* 字体 */
@font-face {
  font-family: 'PingFangRegular';
  src: url('../assets/fonts/PingFangRegular.ttf');
}

@font-face {
  font-family: 'PingFangMedium';
  src: url('../assets/fonts/PingFangMedium.ttf');
}

body {
  font-family: 'PingFangMedium', PingFang SC;
  margin: 0;
  background: #ddd;
}

/* 版心 */
.container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* 模块标题 */
.module-title {
  margin-top: 60px;
  font-family: 'PingFangRegular';
  font-size: 28px;
  color: #000000;
  letter-spacing: 2px;
  text-align: center;
  line-height: 30px;
  font-weight: 600;
}

/* 顶部导航栏 开始 */
.main-top {
  width: 100%;
  height: 650px;
  background: url('../assets/ui_img/banner4.jpg') no-repeat;
  background-size: cover;
  background-position: 100% 100%;

  .container {
    position: relative;
  }

  .top-nav {
    height: 80px;
    width: 100%;
    transition: all 0.3s;

    .t-left {
      float: left;

      a {
        height: 80px;
        line-height: 80px;
        display: inline-block;
        position: relative;

        .nav-logo {
          position: absolute;
          width: 32px;
          height: 32px;
          top: 24px;
          left: 20px;
        }

        span {
          font-size: 16px;
          font-family: 'PingFangMedium';
          margin-left: 62px;
          color: #ffffff;
        }
      }
    }

    .t-right {
      float: right;
      margin-right: 20px;

      ul {
        li {
          float: left;
          width: 120px;
          height: 80px;
          cursor: pointer;
          .nav-tab {
            height: 80px;
            width: 104px;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            font-family: 'PingFangMedium';
            color: #ffffff;
            line-height: 80px;
            font-weight: 400;
          }
          .nav-menu {
            width: 120px;
            height: 0px;
            float: left;
            background: #ffffff;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 0 2px 2px;
            overflow: hidden; // 让li的内容隐藏
            li {
              margin-left: 8px;
              width: 104px;
              height: 55px;
              border-bottom: 1px solid #eeeeee;
              font-family: 'PingFangRegular';
              font-size: 14px;
              // color: #34364e;
              line-height: 55px;
              text-align: center;
              font-weight: 400;
            }
            li:hover {
              color: #2271f7;
              font-family: 'PingFangMedium';
            }
          }
        }
        li:hover {
          .nav-tab {
            border-bottom: 4px solid #1890ff;
            color: #2271f7;
          }
          .nav-menu {
            transition: all 0.3s; // 鼠标移出时menu瞬间消失，故将transition加在hover里
            height: 220px; // 使menu从上往下平滑弹出
          }
        }
        .console {
          width: 104px;
          height: 80px;
          float: left;
          margin: 0 8px;
          position: relative;
          border-bottom: 4px solid transparent;
          cursor: pointer;
          .btn {
            margin-top: 2px;
            background: #2271f7;
            width: 91px;
            height: 35px;
            line-height: 35px;
            // padding-left: 24px;
            font-size: 15px;
            color: #fff;
            border-radius: 8px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .console:hover {
          border-bottom: 4px solid #1890ff;
        }
      }
    }
  }

  .top-nav:hover {
    background-color: #ffffff;
    box-shadow: 0 3px 8px 0 rgba(32, 42, 70, 0.07);

    .t-left a span {
      color: #34364e;
    }

    .t-right {
      .nav-tab {
        color: #34364e;
      }
      .nav-menu li {
        background: #ffffff;
      }
    }
  }

  .baner-title {
    position: absolute;
    top: 188px;
    left: 20px;
    text-align: left;

    h1 {
      font-weight: 800;
      font-size: 40px;
      color: #ffffff;
    }

    h3 {
      width: 493px;
      height: 104px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 26px;
      margin-top: 19px;
    }
  }
}

.documentation {
  height: 1000px;
  margin-bottom: 1000px;
}
/* 顶部导航栏 结束 */
</style>

若对您有所帮助请为我点亮star，THX！