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

无良小老板

已于 2024-05-06 09:14:08 修改

阅读量7.3k

点赞数 6

分类专栏： Vue

于 2022-03-19 08:50:34 首次发布

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/123588680

版权

Vue.js 下拉菜单导航栏 v-for 事件处理

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

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

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

官网效果

效果图片展示
请添加图片描述

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

代码展示

<!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>
    <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>

无良小老板

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用Vue指令实现下拉菜单效果

使用Vue指令实现下拉菜单效果模仿重庆红岩历史革命博物馆官网的导航栏内容和效果，使用Vue实现。官网地址如下：https://www.hongyan.info/官网效果效果图片展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫