element導(dǎo)航欄的樣式修改、包括子菜單的樣式、但是還未實(shí)現(xiàn)子菜單根據(jù)父級(jí)設(shè)置成不同寬度
效果圖：
image.png
代碼部分：
<div id="nav" :style="headStyle" v-cloak>
<div class="nav wrapper">
<div class="logo" :style="{backgroundImage:'url('+logoStyle+')'}"></div>
<div class="nav-content">
<el-menu background="transparent" :router="true" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :unique-opened="true"
@open="open">
<el-menu-item index="1"><a href="javascript:void(0);" class="font">首頁</a></el-menu-item>
<el-submenu index="2" >
<template slot="title" ><a href="javascript:void(0);" class="font">產(chǎn)品&解決方案</a></template>
<el-menu-item index="2-1"><a class="item" href="javascript:void(0);">選項(xiàng)1</a></el-menu-item>
<el-menu-item index="2-2"><a class="item" href="javascript:void(0);">選項(xiàng)2</a></el-menu-item>
<el-menu-item index="2-3"><a class="item" href="javascript:void(0);">選項(xiàng)3</a></el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><a href="javascript:void(0);" class="font">關(guān)于</a></template>
<el-menu-item index="3-1"><a class="item" href="javascript:void(0);">公司新聞</a></el-menu-item>
<el-menu-item index="3-2"><a class="item" href="javascript:void(0);">客戶動(dòng)態(tài)</a></el-menu-item>
<el-menu-item index="3-3"><a class="item" href="javascript:void(0);">行業(yè)資訊</a></el-menu-item>
</el-submenu>
<el-submenu index="4" >
<template slot="title"><a href="javascript:void(0);" class="font">投資者關(guān)系</a></template>
<el-menu-item index="4-1"><a class="item" href="javascript:void(0);">選項(xiàng)1</a></el-menu-item>
<el-menu-item index="4-2"><a class="item" href="javascript:void(0);">選項(xiàng)2</a></el-menu-item>
<el-menu-item index="4-3"><a class="item" href="javascript:void(0);">選項(xiàng)3</a></el-menu-item>
</el-submenu>
<el-submenu index="5" >
<template slot="title"><a href="javascript:void(0);" class="font">聯(lián)系我們</a></template>
<el-menu-item index="5-1"><a class="item" href="javascript:void(0);">選項(xiàng)1</a></el-menu-item>
<el-menu-item index="5-2"><a class="item" href="javascript:void(0);">選項(xiàng)2</a></el-menu-item>
<el-menu-item index="5-3"><a class="item" href="javascript:void(0);">選項(xiàng)3</a></el-menu-item>
</el-submenu>
<el-menu-item index="6"><a class="font" href="javascript:void(0);">生態(tài)合作</a></el-menu-item>
</el-menu>
</div>
</div>
</div>
css部分
``` #nav {
z-index: 999;
overflow: hidden;
width: 100%;
position: fixed;
top: 100px;
height: 100px;
background: white;
box-shadow: -10px 0px 30px 10px rgba(0,0,0,0.08);
}
.nav{
width: 1920px;
height: 100px;
overflow:hidden;
position: relative;
left: 50%;
transform: translateX(-50%);
background:transparent;
}
.nav .logo{
float: left;
width: 216px;
height: 53px;
margin:25px 40px 23px 360px;
background-size: cover;
}
.nav .nav-content{
float: left;
margin: 25px 0;
border:none
}
.nav a{
text-decoration: none;
}
.el-menu-demo{
background:transparent;
}
.el-menu.el-menu--horizontal{
border:none;
}
.el-menu.el-menu--horizontal .el-menu-item .is-active a{
font-size: 16px;
color:white;
}
/* 無下拉 */
::v-deep .el-menu--horizontal>.el-menu-item{
boder: none !important;
}
::v-deep .el-menu--horizontal>.el-menu-item a{
/* color: #333333; */
color: white;
font-size: 16px;
width: 100%;
height: 100%;
text-align: left;
}
/* 有下拉 */
::v-deep .nav .nav-content .el-menu--horizontal>.el-submenu .el-submenu__title {
/* color:#333; */
color: white;
font-size: 16px;
text-align: center;
border: none !important;
padding: 0 30px;
}
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title a{
/* color:#333; */
color: white;
/* width: 100%; */
height: 100%;
}
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
background: #0078ff;
}
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title:hover a{
color:#ffffff !important
}
::v-deep .el-submenu.is-active .el-submenu__title{
border: none;
}
/* 生態(tài) */
::v-deep .el-menu--horizontal > .el-menu-item a{
display: inline-block;
width: 100%;
height: 100%;
padding: 0 30px;
}
/*/首頁 */
::v-deep .el-menu--horizontal>.el-menu-item.is-active{
border:none;
}
/* 二級(jí)菜單 */
::v-deep .el-submenu.is-opened .el-submenu__title {
background-color: #0078ff;
color: #ffffff;
}
::v-deep .el-submenu.is-opened .el-submenu__title i{
color: #ffffff;
}
::v-deep .el-submenu.is-opened .el-submenu__title a{
color:#ffffff !important
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
background: #0078ff;
color: #ffffff;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover a{
color: #ffffff !important
}
.el-menu--horizontal .el-menu-item:not(.is-disabled) .item{
display: inline-block;
width: 100%;
height:100%;
text-decoration: none;
color: #333;
font-size: 16px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: center;
line-height: 36px;
text-shadow: -10px 0px 30px 10px rgba(0,0,0,0.08);
};
::v-deep .el-menu--horizontal .el-menu-item:hover{
background: #0078ff;
}
.el-menu--horizontal>.el-menu-item .is-active{
color:#333;
font-size: 16px;
padding: 0 30px;
}
::v-deep .el-menu--horizontal .el-menu--popup{
border-radius: 0px 0px 8px 8px !important;
}
::v-deep .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
min-width:0 !important;
}
.el-menu--horizontal>.el-submenu .el-submenu__title i{
color: #333;
}
/* icon */
::v-deep .el-icon-arrow-down:before {
content: "";
font-size: 20px;
}
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title:hover i{
color: #ffffff !important
}
::v-deep .el-submenu.is-active .el-submenu__title{
border: none;
}
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
/* color: #333 */
color:rgb(255, 255, 255)
}
導(dǎo)航欄根據(jù)滾動(dòng)變換字體以及左側(cè)logo
``` name: 'one',
data () {
return {
opacity: 0,
activeIndex:'1',
top: 0,
headStyle: { background: 'transparent', color: 'rgba(0,0,0)' },
logoStyle: require('@/assets/logo@2x.png')
}
},
watch: {
'$router.path':
{handler(routerPath){
this.initMenuActive(routerPath)
},
immediate:true
}
,
top (val) {
const font = document.querySelectorAll('.font')
const icon = document.querySelectorAll('.el-submenu__icon-arrow')
if (val >= 20) {
this.headStyle.background = 'rgb(255,255,255)'
this.logoStyle = require('@/assets/logo.png')
for (let i = 0; i < font.length; i++) {
font[i].style.color = 'rgb(0,0,0)'
}
for (let i = 0; i < icon.length; i++) {
icon[i].style.color = 'rgb(0,0,0)'
}
}
if (val <= 20) {
this.headStyle.background = 'transparent'
this.logoStyle = require('@/assets/logo@2x.png')
for (let i = 0; i < font.length; i++) {
font[i].style.color = 'rgb(255,255,255)'
}
for (let i = 0; i < icon.length; i++) {
icon[i].style.color = 'rgb(255,255,255)'
}
}
}
},
mounted () {
window.addEventListener('scroll', this.scrolllHandle)
},
methods: {
initMenuActive(routerPath){
this.activeIndex=routerPath
},
scrolllHandle (e) {
this.top = e.srcElement.scrollingElement.scrollTop // 獲取頁面滾動(dòng)高度
this.opacity = Math.abs(Math.round(this.top)) / 250
},
open (index) {
const element = document.querySelector('.el-menu--popup')
// const item = document.querySelector('.el-submenu__title')
// element.style.minWidth = item.style.width
// eslint-disable-next-line no-constant-condition
if (index === '3' || '5') {
element.style.minWidth = '152px'
} else if (index === '4') {
element.style.minWidth = '170px'
}
}
}
