上期我们讲述了有关vue的一些指令,今天就利用一些指令来实现下拉菜单效果吧。这里是仿照制作重庆红岩历史革命博物馆官网的导航栏,话不多说直接上代码:
(1)HTML和vue部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿重庆红岩历史革命博物馆官网的导航栏</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/homeWokr1.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="box">
<img src="img/logo.png" >
<div class="content">
<img src="img/icon-18.png" >
<ul class="contentUl">
<li><a href="#">设为首页</a></li>
<div class="line">|</div>
<li><a href="#">加入收藏</a></li>
<div class="line">|</div>
<li><a href="#">热线:023-65312300(沙坪坝片区)023-63303457(渝中片区)</a></li>
<div class="line">|</div>
<li><a href="#">English</a></li>
</ul>
<form name="search" class="myform" method="post">
<input type="text" name="key" value class="search" placeholder="请输入关键词"/>
<span class="search_txt"><a href="#">搜索</a></span>
</form>
</div>
</div>
</div>
<!-- 头部 end-->
<!-- 导航部分 -->
<div class="box2" >
<ul class="navUl" id="root" v-cloak>
<li v-for="menu in menus" @mouseover="menu.show=!menu.show" @mouseout="menu.show=!menu.show" class="navLi">
<a :href="menu.url">
{{menu.name}}
</a>
<ul v-show="menu.show" class="navSub">
<li v-for="subMenu in menu.subMenus" class="subLi">
<a :href="subMenu.url">
{{subMenu.name}}
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- 导航部分 end-->
<!-- banner部分 -->
<div class="box3"></div>
<!-- banner部分 end-->
<!-- js部分 -->
<script>
const app=Vue.createApp({
data(){
return{
menus:[
{
name:'首页',url:'#',show:false
},
{
name:'关于红岩',url:'#',show:false,subMenus:[
{name:'红岩文化',url:'#'},
{name:'博物馆机构',url:'#'},
{name:'历史沿革',url:'#'}
]
},
{
name:'公告动态',url:'#',show:false,subMenus:[
{name:'文博信息',url:'#'},
{name:'政务平台',url:'#'},
{name:'公告',url:'#'},
{name:'专题报告',url:'#'}
]
},
{
name:'馆藏精品',url:'#',show:false,subMenus:[
{name:'一级文物',url:'#'},
{name:'二级文物',url:'#'},
{name:'三级文物',url:'#'}
]
},
{
name:'陈列展馆',url:'#',show:false,subMenus:[
{name:'虚拟展览',url:'#'},
{name:'基本陈列',url:'#'},
{name:'复原陈列',url:'#'},
{name:'临时展览',url:'#'},
{name:'展览交流',url:'#'}
]
},
{
name:'研究开发',url:'#',show:false,subMenus:[
{name:'历史研究',url:'#'},
{name:'艺术创作',url:'#'},
{name:'影音在线',url:'#'},
{name:'文创产品',url:'#'}
]
},
{
name:'公共教育',url:'#',show:false,subMenus:[
{name:'党性教育',url:'#'},
{name:'爱国主义教育',url:'#'},
{name:'研学实践教育',url:'#'},
{name:'科普教育',url:'#'}
]
},
{
name:'参观服务',url:'#',show:false,subMenus:[
{name:'景点介绍',url:'#'},
{name:'服务内容',url:'#'},
{name:'网上预约',url:'#'},
{name:'志愿服务',url:'#'}
]
},
{
name:'网上预约',url:'#',show:false,
}
]
}
},
methods:{
},
});
const vm=app.mount("#root");
</script>
<!-- js部分 end-->
</body>
</html>
(2)css部分
.header{
width: 100%;
min-width: 1200px;
height: 140px;
background: url(../img/header-bg.png);
}
.box{
width: 1024px;
height: 140px;
min-width: 1200px;
/* background: #1E90FF; */
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
.box>img{
width: 400px;
height: 89px;
margin-top: 20px;
}
.content{
width: 570px;
height: 95px;
margin-top: 20px;
/* background: #4855EC; */
display: flex;
flex-direction: column;
align-items: flex-end;
/* justify-content: flex-end; */
}
.content>img{
width: 245px;
height: 20px;
}
.contentUl{
width: 560px;
height: 20px;
/* background: #fc0; */
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contentUl>li>a{
display: block;
font-size: 12px;
color: #ec1b23;
}
.contentUl>li>a:hover{
color: #990000;
}
.line{
font-size: 12px;
color: #ec1b23;
}
.myform{
width: 175px;
height: 25px;
margin-top: 10px;
}
.search{
background: #fff;
float: left;
font-family: "宋体";
font-size: 12px;
height: 25px;
text-indent: 1rem;
width: 120px;
border: 1px solid #d0d0d0;
}
.search_txt>a{
display: block;
float: left;
width: 50px;
height: 27px;
background: #9d3328;
color: #FFF;
line-height: 27px;
text-align: center;
}
.search_txt>a:hover{
background: #FFCC00;
}
.box2{
width: 100%;
min-width: 1200px;
border-bottom: 8px solid #ed1d24;
height: 100px;
background: url(../img/nav-bg.png);
}
.navUl{
width: 1024px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: row;
align-items: center;
margin-left: auto;
margin-right: auto;
/* background: #1E90FF; */
}
.navLi{
height: 100px;
line-height: 100px;
position: relative;
}
.navUl>li>a{
display: block;
color: #fff;
font-size: 18px;
font-weight: bold;
}
.navUl>li>a:hover{
background: url(../img/nav.png);
}
.navSub{
width: 85px;
text-align: center;
position: absolute;
/* top: 60px; */
left: 75%;
margin-left: -60px;
font-size: 12px;
background: #ed1d24;
}
.navSub>li>a{
font-size: 16px;
color: #fff;
display: block;
line-height: 50px;
transition: all 0.5s;
}
.navSub>li>a:hover{
background: #ee;
opacity: 0.6;
}
[v-cloak]{
display: none;
}
.box3{
min-width: 1200px;
width: 100%;
height: 500px;
background: url(../img/banner1.jpg);
background-size: 100% 100%;
}
(3)效果展示