使用Vue指令实现下拉菜单效果
使用Vue指令实现下拉菜单效果
模仿重庆红岩历史革命博物馆官网的导航栏内容和效果，使用Vue实现。
官网地址如下：https://www.hongyan.info/
官网效果
效果图片展示
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
代码展示
<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>Documenttitle>
<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>
<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>