vue中的横向排列_vue.js⾸页PC端横排导航栏先看看效果
{{item.name}}
export default{
data(){
return{
nowIndex:0,
items:[
{
name:‘⾸页‘,
isSubShow:false,
subItems:[
]
},
{
name:‘精选路线‘,
isSubShow:false,
subItems:[
{
name:‘马尔代夫‘
},
{
name:‘索马⾥海峡‘
},
{
name:‘丽江/昆明‘
},
{
name:‘天安门/故宫‘
}
]
}
name:‘关于我们‘, isSubShow:false, subItems:[
{
name:‘企业简介‘},
{
name:‘未来规划‘},
{
name:‘企业动态‘}
]
},
{
name:‘旅游攻略‘, isSubShow:false, subItems:[
{
name:‘热门攻略‘},
{
name:‘经济攻略‘},
{
name:‘青年攻略‘},
{
name:‘⽼年攻略‘},
{
name:‘吃货必看‘
},
{
name:‘定制旅游‘,
isSubShow:false,
subItems:[
{
name:‘普通定制‘
},
{
name:‘豪华专线‘
},
{
name:‘情侣必备‘
}
]
}
]
}
},
methods:{
selectStyle:function(item){
item.isSubShow = true
},
outStyle(item){
item.isSubShow = false
}
}
}
.nav{width:100%;height: 50px;background: #48B246;}
.nav .nav-centent{width: 1200px;margin:0 auto;height: 50px;}
js导航栏下拉菜单.nav .nav-centent > li{width: 120px;height: 50px;display: block;float: left;text-align: center;margin-right: 20px;position: relative;cursor: pointer;}
.nav .nav-centent li a{width: 120px;height: 50px;display: block;font-size: 18px;line-height: 50px;color: #fff;}
.nav .nav-centent ul{position: absolute;left: 0;top: 50px;z-index: 99;width: 100%;}
.nav .nav-centent ul li{width: 120px;height: 50px;display: block;float: left;text-align: center;margin-right: 20px;line-height: 50px;background: #46B148;}
.nav .nav-centent ul li a:hover{background: #fff;color:#48B246; }
.
nav .nav-centent li a:hover{background: #fff;color:#48B246; }
.nav .nav-centent {background: #fff;color:#48B246; }
刚开始学，写的不好请⼤神不要喷我。