Vue实现头部导航宽屏下拉菜单

news/2024/11/15 3:12:35/

目录

一、效果

二、实现


一、效果: 

实现功能如图:(只有导航1有数据)

二、实现:  

直接上代码:

<template><div class="menu_all"><!-- 头部导航 --><div class="menu" :key='"menu" + i' v-for='(v, i) in navigationList'
@mouseover="menuOver(v.navigationId)"><p>{{v.navigationName}}</p></div><!-- 下拉子菜单 --><div class="submenu"><div class="sub_left"><ul ref="pClassList" v-for="(item,index) in currSub" v-bind:key="index" @mouseover="mouseOver(index)" :class="{'active':index===value}"><li><a href="#" @mouseover="mouseOver(index)" :class="{'active':index===value}">{{ item.classifyName }}</a></li></ul></div><div class="sub_right" v-if="show>-1 && currSub[show]"><ul><li ref="proList" v-for="itemChild in currSub[show].tools" v-bind:key="itemChild.id"><a :href="itemChild.toolUrl"><div class="sub_text"><h4>{{ itemChild.toolName}}</h4><h6>{{ itemChild.owner }}</h6><p>{{ itemChild.introduction }}</p></div></a></li></ul></div></div></div>
</template><script>
export default {name: 'NavDown',data: function () {return {menuId: null,show: 0,value: 0,active: '',navigationList: [{'navigationId': 1,'navigationName': '导航1','sorted': 1},{'navigationId': 2,'navigationName': '导航2','sorted': 2},{'navigationId': 3,'navigationName': '导航3','sorted': 3},{'navigationId': 4,'navigationName': '导航4','sorted': 4}],proClassify: [{'classify': [{'classifyId': 1,'classifyName': '分类1','tools': [{'classifyId': 1,'createTime': 1626327646000,'creator': 9956,'env': 'COMMON','id': 1,'introduction': '产品1简介','isValid': 1,'owner': 0000,'toolName': '产品1','toolUrl': 'http://www.baidu.com','updateTime': 1626334554000}]},{'classifyId': 2,'classifyName': '分类2','tools': [{'classifyId': 2,'createTime': 1626335332000,'creator': 9956,'env': 'COMMON','id': 2,'introduction': '产品2简介','isValid': 1,'owner': 0000,'toolName': '产品2','toolUrl': 'http://www.bilibili.com','updateTime': 1626335332000}]}],'navigationId': 1},{'classify': [],'navigationId': 2},{'classify': [],'navigationId': 4},{'classify': [],'navigationId': 5}]}},
// 根据导航id,提取对应classify数据computed: {subMap () {let menu = {}this.proClassify.map(v => {menu[v.navigationId] = v.classify || []})return menu || {}},currSub () {return this.subMap[this.menuId] || []}},methods: {mouseOver (i) {this.value = ithis.show = i},menuOver (id) {this.menuId = id}}
}
</script><style scoped>
.menu {display: inline-block;margin-left: 20px;height: 66px;color: black;line-height: 66px;
}
.menu p {font-size: 16px;text-align: center;line-height: 68px;
}
.menu ul li a.active {background-color: white;
}
.menu ul li a:hover {color: #ff7240;
}
.menu-item:hover + .submenu {display: block;
}/*下拉子菜单*/
.submenu {display: none;position: absolute;width: 100%;height: 450%;background-color: white;z-index: 999;
}
.sub_left {float: left;margin-left: 3%;margin-top: 1%;margin-bottom: 1%;width: 20%;height: 90%;overflow: auto;
}
.sub_left::-webkit-scrollbar {display: none;
}
.sub_left ul {padding-left: 2%;width: 70%;margin-left: 25%;border-right: 1px solid #9c9c9c;
}
.sub_left ul:hover {border-right: 3px solid #ff7240;border-collapse: collapse;color: white;
}
.sub_left ul.active {border-right: 3px solid #ff7240;
}
.sub_left ul li {list-style-type: none;line-height: 400%;
}
.sub_left ul li a {display: block;font-size: 16px;text-decoration: none;color: black;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
.sub_left ul li a:hover {color: #ff7240;
}
.sub_left ul li a.active {color: #ff7240;
}
.sub_left:hover .sub_right {display: block;
}
.sub_right {float: right;width: 70%;height: 86%;overflow: auto;margin-top: 1%;margin-right: 5%;
}
.sub_right::-webkit-scrollbar {display: none;
}
.sub_right ul {display: inline;
}
.sub_right ul li {display: inline-block;vertical-align: top;list-style-type: none;position: relative;float: left;margin-bottom: 5%;margin-right: 5%;width: 20%;height: 10%;
}
.sub_right ul li:last-child {margin-right: 0;
}
.sub_text a {text-decoration: none;
}
.sub_left:hover + .sub_right {display: block;
}
.sub_text {width: 100%;height: 250%;float: left;list-style-type: none;padding: 4% 10% 4% 10%;line-height: 30px;
}
.sub_text:hover {background-color: rgba(255, 158, 91, 0.41);border-radius: 4px;
}
.sub_text h4 {width: 70%;float: left;color: black;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-align: left;font-size: 16px;margin-top: -2%;
}
.sub_text h6 {width: 30%;float: right;color: #000;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-align: right;font-size: 14px;margin-top: -2%;
}
.sub_text p {float: left;width: 100%;color: #8a96a7;display: inline-block;vertical-align: top;text-align: left;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size: 14px;line-height: 20px;
}/*下拉子菜单悬停出现*/
.menu_all:hover .submenu {display: block;
}
</style>

代码可能有冗余未删除,若代码有误或可以改进,欢迎指正!


http://www.ppmy.cn/news/385005.html

相关文章

苹果CMSV10高端安全干净模板宽屏大图轮播支持DIY的自适应模板

苹果CMSV10高端安全干净模板宽屏大图轮播支持DIY的自适应模板 首页幻灯片数据为5星推荐全部分类8个&#xff08;必须8个&#xff09;&#xff0c;图片链接填写格式"http://xxx.com/xxx.jpg) #0D0804"&#xff0c;其中#xxx是颜色参数&#xff0c;颜色代码百度自行搜索…

css宽屏显示_如何仅导入宽屏CSS文件

css宽屏显示 How to import a css file, such as for an open fonts hosted by Google, only for wide screens, such as with px of larger than 846? 如何css文件导入&#xff08;例如由Google托管的开放字体&#xff09;&#xff0c;仅用于宽屏幕&#xff08;例如px大于846…

广告图宽屏显示的效果

首先看图片&#xff1a; 在这个图片中&#xff0c;我们可以看出&#xff0c;这个效果只要实现的是广告图宽屏显示的效果&#xff0c;当鼠标移动到圆点的时候&#xff0c;广告图能实现淡入淡出的效果&#xff1b;这个效果是我们一直要找的一种插件 最后&#xff0c;Javascript的…

魔兽争霸III冰封王座宽屏分辨率的修改方法

最近新买了个宽屏的液晶显示器&#xff0c;1440*900的分辨率&#xff0c;无论是看片还是玩游戏都很爽。但是在玩魔兽争霸的时候出了一个小问题&#xff0c;就是这款游戏不支持宽屏的分辨率&#xff0c;在游戏图像设置的选项里根本没有16:9的分辨率&#xff0c;全部是4:3的。因此…

PPT基础(二)宽屏和普屏

宽屏长宽比&#xff08;16&#xff1a;9&#xff09;&#xff0c;普屏长宽比&#xff08;4&#xff1a;3&#xff09; PPT的2013开始&#xff0c;默认页面为16&#xff1a;9 设置宽屏与普屏&#xff1a; 点击菜单栏上的 设计 找到右侧的 幻灯片大小 点击其下拉三角&#xff0c…

php幻灯片调大小,ppt尺寸设置 PPT幻灯片大小更改为标准或宽屏

在早期版本的PowerPoint 中&#xff0c;幻灯片的形状较方 (4:3)。 世界上的许多电视和视频都已采用宽屏和高清格式&#xff0c;PowerPoint 也是如此。现在&#xff0c;默认的幻灯片大小是宽屏 (16:9)。 您可以按照以下方法更改幻灯片大小&#xff1a; 标准 (4:3) 宽屏 (16:9)…

wordpress自适应表格_wordpress响应式移动端完美自适应宽屏主题

WordPress移动宽屏主题HTML5CSS3响应式布局&#xff0c;这款主题在我很久以前就在找的&#xff0c;之前我是比较倾向于特别宽的网站总感觉很窄的网页让人喘不过气&#xff0c;看着很难受&#xff0c;不过可惜那时没有找到&#xff0c;如果当年找到了可能森林之家就不是这个样子…

css宽屏显示_宽屏网络:使用CSS对象适合

css宽屏显示 Most everyone is familiar with the fact that movies are letterboxed, rescaled or cropped as they move from the theater to televisions and tablets. As a web developer, you’ll also be aware of the different ways background images can be made res…