Use Vue instructions to implement drop-down menu effects
Imitate the content and effects of the navigation bar on the official website of Chongqing Hongyan History and Revolution Museum, and use Vue to implement it.
The official website address is as follows: https://www.hongyan.info/
Official website effect
Effect picture display
We can use v-forthe directive to render a list based on an array. v-forThe directive requires item in itemsa special syntax of the form where items is the source data array and itemis an alias for the array element being iterated over.
Code display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
/* width: 100%; */
margin-top: 50px;
height: 100px;
background-color: #eb131e;
}
.nav-list{
width: 1500px;
margin: 0 auto;
}
.menus{
float: left;
}
.menus .menus-a{
/* display: block; */
float: left;
font-size: 25px;
color: #ffffff;
font-weight: bold;
width: 140px;
text-align: center;
height: 70px;
padding: 30px 0 0 0;
border-right: 3px #FFFFFF solid;
}
.menus>.menus-a:hover{
background-color: #cf2913;
color: #fae92b;
}
.nav-list-menu{
display: block;
width: 110px;
text-align: center;
z-index: 1000;
margin-top: 100px;
}
.subMenu a{
float: left;
font-size: 20px;
background-color: #EB131E;
color: #FFFFFF;
width: 120px;
height: 50px;
line-height: 50px;
/* padding-left: 30px; */
text-align: center;
border-top: 1px #909090 solid;
}
.subMenu a:hover{
background-color: #ffaa00;
}
</style>
</head>
<body>
<!-- 199000415-俞皓文 -->
<div id="app"></div>
<template id="root">
<div class='nav'>
<ul class="nav-list">
<li v-for="(nav,index) in menus" :key="index" class="menus" @mouseover="nav.show=!nav.show" @mouseout="nav.show=!nav.show">
<a :href="nav.url" class="menus-a">
{
{nav.name}}
</a>
<ul class="nav-list-menu" v-show='nav.show'>
<li v-for="subMenu in nav.subMenus" class="subMenu">
<a :href="nav.url">
{
{subMenu.name}}
</a>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
const app = Vue.createApp({
template:'#root',
data(){
return {
menus:[
{
name:'首页',url:'#'},
{
name:'关于红岩',url:'#',subMenus:[
{
name:'红岩文化',url:'#',},
{
name:'博物馆机构',url:'#',},
{
name:'历史沿革',url:'#',},
]},
{
name:'公告动态',url:'#',subMenus:[
{
name:'文博信息',url:'#',},
{
name:'政务平台',url:'#',},
{
name:'公告',url:'#',},
{
name:'专题报道',url:'#',},
]},
{
name:'馆藏精品',url:'#',subMenus:[
{
name:'一级文物',url:'#',},
{
name:'二级文物',url:'#',},
{
name:'三级文物',url:'#',},
]},
{
name:'陈列展览',url:'#',subMenus:[
{
name:'虚拟展览',url:'#',},
{
name:'基本陈列',url:'#',},
{
name:'复原陈列',url:'#',},
{
name:'临时展览',url:'#',},
{
name:'展览交流',url:'#',},
]},
{
name:'研究开发',url:'#',subMenus:[
{
name:'历史研究',url:'#',},
{
name:'艺术创作',url:'#',},
{
name:'影音在线',url:'#',},
{
name:'文创产品',url:'#',},
]},
{
name:'公共教育',url:'#',subMenus:[
{
name:'党性教育',url:'#',},
{
name:'爱国主义教育',url:'#',},
{
name:'研学实践教育',url:'#',},
{
name:'科普教育',url:'#',},
]},
{
name:'参观服务',url:'#',subMenus:[
{
name:'景点介绍',url:'#',},
{
name:'服务内容',url:'#',},
{
name:'网上预约',url:'#',},
{
name:'志愿服务',url:'#',},
]},
{
name:'网上预约',url:'#',},
]
}
},
})
app.mount('#app')
</script>
</body>
</html>