使用Vue指令实现下拉菜单效果

使用Vue指令实现下拉菜单效果

模仿重庆红岩历史革命博物馆官网的导航栏内容和效果,使用Vue实现。
官网地址如下:https://www.hongyan.info/

官网效果

效果图片展示
使用Vue指令实现下拉菜单效果_第1张图片
使用Vue指令实现下拉菜单效果_第2张图片

我们可以用 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>

你可能感兴趣的:(Vue,vue,vue.js)