需要注意的是 二级菜单的盒子要在最大的盒子里面 要把它撑开 而不是和导航一个div ,下面是实现的效果 但有点潦草 具体样式需自行调整
具体代码如下:
html代码:
<div class="Header"> <div class="HeaderBody" @mouseleave="clearActiveIndex"> <div class="headerBox"> <div class="Logo"> <img class="headerLogo" src="@/assets/logo.png" /> </div> <div class="menu"> <ul> <li v-for="(item, index) in menuItems" :key="index" :class="{ active: activeIndex === index }" @mouseover="setActiveIndex(index)" > { { item }} </li> </ul> </div> <!-- 语言切换 --> <div class="HeaderLanguage"> <span style="padding-right:10px" :class="{ active: isActive1 }" @click="toggleActive(1)" >中文{ {$t('appHeader.pickerTitle') }}</span > <span :class="{ active: isActive2 }" @click="toggleActive(2)" >Eng</span > <!-- <van-nav-bar :title="$route.name" :left-text="$t('appHeader.back') || '返回'" :right-text="$t('appHeader.pickerTitle') || '语言选择'" left-arrow @click-left="handleBack" @click-right="handleSelectLang" /> --> </div> </div> <ul class="twoUl" v-if="activeIndexFlag"> <li class="TwoList" v-for="(subItem, subIndex) in subMenuItems" :key="subIndex" > { { subItem }} </li> </ul> </div> </div>
data声明的变量:
export default { data() { return { menuItems: ["Home", "About", "Services", "Contact"], subMenuItems: [ "Submenu1", "Submenu2", "Submenu3", "Submenu1", "Submenu2", "Submenu3", "Submenu1", "Submenu2", "Submenu3", "Submenu1", "Submenu2", "Submenu3", ], activeIndex: null, activeIndexFlag: false, isActive1: false, isActive2: false, language:'zh' }; },
js方法:
methods: { //显示 setActiveIndex(index) { this.activeIndex = index; this.activeIndexFlag = true; }, //隐藏 clearActiveIndex() { this.activeIndex = null; this.activeIndexFlag = false; }, }
css样式:
<style lang="less" scoped> .HeaderBody { display: flex; justify-content: space-between; align-items: center; /* 垂直居中 */ flex-direction: column; background-color: #262d5f; /* 红色,透明度为 0.5 */ box-sizing: border-box; } .HeaderBody:hover { // background-color: #262d5f; /* 红色,透明度为 0.5 */ // transition: background-color 1s ease; /* 过渡属性 */ // opacity: 0.7; } .headerBox { display: flex; align-items: center; width: 100%; } .Header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; } .Logo { padding-left: 50px; } .headerLogo { width: 50px; height: 50px; } .menu { display: flex; justify-content: center; background-color: rgba(0, 0, 0, 0); width: 800px; color: #ffffff; } ul { display: flex; list-style: none; padding: 0; margin: 0; columns: 2; } li { position: relative; z-index: 2; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; } li::after { content: ""; position: absolute; bottom: 0; left: 0; } li:hover::after { transform: scaleX(1); } ul ul { position: absolute; display: none; background-color: #262d5f; /* 红色,透明度为 0.5 */ list-style-type: disc; } li:hover > ul { display: block; } .twoUl { box-sizing: border-box; width: 50%; height: 100%; padding-left: 4%; color: #ffffff; display: flex; justify-content: center; flex-wrap: wrap; } .TwoList { width: calc(100% / 2 - 30px); display: flex; padding: 10px; box-sizing: border-box; flex-wrap: wrap; } .TwoList:hover { border-bottom: solid 1px #fff; transition: transform 0.3s ease; } // 语言切换 .HeaderLanguage { color: rgb(196, 192, 192); font-size: 12px; font-weight: bolder; cursor: pointer; } .active { color: #ffffff; border-bottom: 3px solid #91d010; } // 轮播图 .swiper-slide { width: 100%; } .swiper-slide img { width: 100%; height: 4rem; } </style>
屏幕效果链接:https://live.csdn.net/v/302286?spm=1001.2014.3001.5501
最后
感谢阅读,如有不足之处,欢迎在评论区讨论!