css层叠导航栏

以你之姓@ 2022-12-23 15:20 238阅读 0赞

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

代码：

<template>
      <div class="header-box" :class="{opacityNav:isBackgroundOpacity}">
        <div class="small-box">
          <div class="nav-box">
            <div class="logo">
              <a href="#" class="mot2" onClick="eventTrack('btn_logo')">
                <img src="../assets/images/logo.png" alt="食品logo" style="display:inline-block;width:50px;height: 60px;"/>
              </a>
            </div>
            <div class="nav">
              <ul class="sub1">
                <li><a href="/" class="mot2">首页</a></li>
                <li><a href="/wheatenfood" class="mot2">面食产品</a>
                  <ul class="sub2 depth_about">
                    <li><a href="/wheatenfood/#">黑麦苦荞系列</a></li>
                    <li><a href="/#">营养白面系列</a></li>
                    <li><a href="/#">国际生态有机系列</a></li>
                  </ul>
                </li>
                <li><a href="/seasoning" class="mot2">调味佐料</a>
                  <ul class="sub2 depth_business">
                    <li><a href="/#">传统调味系列</a></li>
                    <li><a href="/#">地方特色系列</a></li>
                    <li><a href="/#">国际生态有机系列</a></li>
                  </ul>
                </li>
                <li><a href="/news" class="mot2">资讯动态</a>
                  <ul class="sub2 depth_pr">
                    <li><a href="#">公司新闻</a></li>
                    <li><a href="#">行业动态</a></li>
                  </ul>
                </li>
                <li><a href="/about" class="mot2">关于我们</a>
                  <ul class="sub2 depth_recruit">
                    <li><a href="#">联系方式</a></li>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">荣誉资质</a></li>
                    <li><a href="#">近期动态</a></li>
                  </ul>
                </li>
                <li><a href="https://www.taobao.com/" class="mot2 btn_inquiry"
                       target="_blank">官方商城</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Header",
      data() {
        return {
          isBackgroundOpacity: false
        }
      },
      methods: {
        isOpacity() {
          console.log('变透明')
        },
      },
      mounted() {
        this.isOpacity()
        console.log(this.$route.path);
        if (this.$route.path == '' || this.$route.path == '/' || this.$route.path == '/index') {
          this.isBackgroundOpacity = true
        }
      },
      created() {
      },
      watch: {
        $route(to, from) {
          console.log(to)
          console.log(from)
    
        },
    
      },
    }
    </script>
    
    <style lang="scss" scoped>
    .opacityNav {
      //opacity: 0.5;
    }
    
    .header-box {
      width: 100%;
      position: fixed;
      z-index: 9999;
      top: 0;
      background-color: lightseagreen;
    
      .small-box {
        width: 1200px;
        margin: 0 auto;
    
        .nav-box {
          height: 70px;
          line-height: 70px;
          color: white;
    
          .logo {
            float: left;
    
            a {
              img {
                padding-top: 5px;
              }
            }
          }
    
          .nav {
            float: left;
    
            a:hover {
              color: lightcoral;
            }
    
            .sub1 {
              li {
                float: left;
    
                .mot2 {
                  margin: 0 66px;
                }
    
                .sub2 {
                  display: none;
                  position: relative;
                  left: 66px;
    
                  li {
                    float: none;
                  }
                }
              }
    
    
            }
    
          }
    
          .nav:hover {
            .sub1 {
              li {
                .sub2 {
                  display: block;
                }
              }
            }
    
          }
        }
      }
    
    }
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221120/d104eb3b5ea243a99ff9cf34251397b2.png