Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）

已于 2025-01-19 15:23:22 修改
阅读量5k 收藏 12
点赞数 5
分类专栏： + Vue + Vue2 开发问题汇总 文章标签： vue.js css less scss 垂直分类菜单 鼠标移入菜单后右侧显示二级 vue垂直菜单 右侧显示更多
于 2023-04-20 12:17:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/130263441
版权
+ Vue 同时被 2 个专栏收录
250 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
112 篇文章 ¥9.90 ¥99.00
订阅专栏
本文提供Vue2/Vue3/Nuxt项目中垂直菜单的实现，鼠标移入菜单项后，右侧悬浮展示二级菜单的完整源码，包含详细注释和一键复制功能。无第三方依赖，所有资源齐全。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

网上的教程都太乱了，各种杂乱无注释代码、图片资源丢失、一堆样式代码，根本无法改造后应用到自己的项目中。

本文实现了 在 Vue2 / Vue3 / Nuxt 项目中，垂直分类菜单项，当用户鼠标移入菜单后，右侧自动出现二级分类悬浮容器盒子效果，

您可以直接复制源码，然后按照您的需求再稍微改改样式就能用了，

如下图所示，无任何第三方依赖及插件，并且涉及到的所有图片、图标资源都为您准备好了！

超详细注释，无任何乱七八糟的代码

在这里插入图片描述

示例源码

推荐使用一键复制功能，避免漏选代码。

随便找个新页面，一键复制运行起来。

<
了解本专栏 订阅专栏 解锁全文
vue3 - 实现网页悬浮窗鼠标可拖拽和靠边隐藏功能，可拖拽悬浮球组件示例代码，当靠近屏幕边缘时会磁吸靠近并缩进半隐藏，反之鼠标移入时悬浮球按钮元素会恢复原状态，vue3怎么实现右侧悬浮并且能拖拽拖动
高级前端工程师
04-08 6800
vue3，pc端网页，h5移动端，vue3实现悬浮窗拖拽和靠边隐藏，vue3实现一个可以随意拖拽的悬浮按钮组件拖动悬浮按钮，实现h5拖拽悬浮挂件附带吸边效果，拖拽磁吸边缘半隐藏，PC端侧边悬浮并且靠边隐藏一半，在页面右上角实现可悬浮/隐藏的系统菜单，vue3飘浮窗实现（屏幕上下左右移动，触壁回弹）v拖拽悬浮组件靠边收起，可拖拽到页面的任何位置，怎么实现右侧悬浮，并且能拖拽的功能，实现可以拖动的悬浮框，拖拽球体贴边隐藏，vue3实现悬浮可拖动且靠近屏幕边缘自动吸附悬挂图标组件，拖动时很卡不流畅解决，Vue3实
vue2 - 实现网页悬浮窗鼠标可拖拽和靠边隐藏功能，可拖拽悬浮球组件示例代码，当靠近屏幕边缘时会磁吸靠近并缩进半隐藏，反之鼠标移入时悬浮球按钮元素会恢复原状态，vue如何实现右侧悬浮并且能拖拽拖动？
最新发布
高级前端工程师
04-08 5254
vue2，pc端网页，h5移动端，vue实现悬浮窗拖拽和靠边隐藏，vue2实现一个可以随意拖拽的悬浮按钮组件拖动悬浮按钮，实现h5拖拽悬浮挂件附带吸边效果，拖拽磁吸边缘半隐藏，PC端侧边悬浮并且靠边隐藏一半，在页面右上角实现可悬浮/隐藏的系统菜单，vue2飘浮窗实现（屏幕上下左右移动，触壁回弹）v拖拽悬浮组件靠边收起，可拖拽到页面的任何位置，怎么实现右侧悬浮，并且能拖拽的功能，实现可以拖动的悬浮框，拖拽球体贴边隐藏，vue2实现悬浮可拖动且靠近屏幕边缘自动吸附悬挂图标组件，拖动时很卡不流畅解决，Vue2实现
js实现鼠标悬停显示二级菜单
03-10
js实现鼠标悬停显示二级菜单的具体内容及代码
Vue在页面右上角实现可悬浮/隐藏的系统菜单
01-21
这是个大多数网站很常见的功能，点击页面右上角头像显示一个悬浮菜单，点击页面其他位置或再次点击头像则菜单隐藏。 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍vue文档的菜鸟来说，坑还是要亲自踩过才算圆满。 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能，因此路由暂未涉及。 基本思路是：通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。其中在父组件的绑定click事件中，将传入子组件的showCancel值重置。 这里就涉及第一个小知
VUE 鼠标移入/移除，显示/隐藏操作按钮
JScript__的博客
04-01 377
VUE 鼠标移入/移除，显示/隐藏操作按钮
Vue 实现垂直菜单分类栏目，鼠标移入下方出现悬浮二级菜单容器效果
weixin_60172238的博客
06-07 2124
需要注意的是 二级菜单的盒子要在最大的盒子里面 要把它撑开 而不是和导航一个div ，下面是实现的效果 但有点潦草 具体样式需自行调整具体代码如下：html代码： <div class="Header"> <div class="HeaderBody" @mouseleave="clearActiveIndex"> <div class="headerBox"> <div class="Logo">
vue实现鼠标移过出现下拉二级菜单功能
10-15
主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue鼠标划过显示二级菜单并切换icon
aycjj的博客
11-29 1991
如图，鼠标滑过显示二级菜单和图标 滑出隐藏显示。
elementUI+vue实现商城分类导航弹出二级菜单悬浮展示（鼠标经过时显示）
qq_32886245的博客
03-09 7259
效果 二级菜单显示是用了elementUI的两个组件：el-tooltip + el-cascader-panel vue代码 <!-- 分类 --> <div class="category-box"> <span class="category-label">分类</span> <div class="flex-1"> <div class="category-list">
vue,element 制作后台管理系统菜单，二级菜单鼠标悬停侧边展示
baizong_zh的博客
06-25 5426
vue,element 制作后台管理系统菜单，二级菜单鼠标悬停侧边展示 因为：element的导航菜单下拉都是向下的，这时候别人要是有二级菜单和三级菜单，而且很多的话，就很不方便。 所以：打算把二级菜单之后的三级菜单做出侧边弹出 这时候找了一遍导航栏的组件，发现并不能通过设置属性直接获得这个功能。但是这时候发现导航菜单还是有这个功能的，但是是需要在collapse属性为fasle的时候，当在这个时候导航菜单会折叠起来。 但是只要设置好宽，实际上还是可以使用的。所以就打算用它了，给二级菜单在嵌套一层。
头部超级菜单导航-鼠标放上去显示二级菜单
07-25
头部超级菜单导航-鼠标放上去显示二级菜单
hover鼠标悬停导航滑动显示二级下拉菜单
06-04
hover鼠标悬停导航滑动显示二级下拉菜单
鼠标悬浮显示二级菜单效果的jquery实现
10-25
当鼠标悬浮时显示二级菜单，这种类似的效果，想必大家在浏览网页时经常会遇到吧，下面有个示例，大家可以看看
CSS - 垂直菜单（鼠标移入时显示右侧容器）
王二红
05-06 894
* left的数值就是菜单的宽度 *//* hover右侧显示的容器宽高 *//* 菜单被hover时的样式 *//* 最后一个去掉下划线 *//* 右侧显示容器 *//* 去掉滚动条 *//* 隐藏滚动条 *//* 菜单样式 */
纯 css - 当鼠标移入 img 头像悬浮、悬停特效动画效果（头像从一个圆圈或洞里伸出来的效果）详细示例源码
高级前端工程师
02-08 2366
vue项目鼠标移入图片 如何让头像图片悬浮一下css前端酷炫的图像悬停特效css悬停圆形头像旋转效果一个炫酷的头像悬停效果CSScss悬停圆形头像旋转效果特效--图像悬停效果炫酷,CSS 实现一个3D图像悬停效果用vue实现,鼠标悬停放大图片最好的鼠标移入头像出现悬浮特效动画的文章Vue鼠标悬停图片放大倾斜动画特效炫酷,CSS 实现一个3D图像悬停效果CSS3悬停效果CSS图片响应悬停效果css3悬停图片特效css悬停圆形头像旋转效果源码示例
鼠标悬浮显示二级菜单
Hzq88888的博客
02-16 1006
示例图： 鼠标悬浮显示二级菜单 //css .downAlls{ color: #fff; font-size: 14px; cursor: pointer; position: relative; } .ineerList{ position: absolute; left: -20px; t.
vue实现鼠标移入动态展示导航栏二级菜单（异步）
一段奇妙的旅程~
04-25 2012
vue实现鼠标移入动态异步展示导航栏二级菜单，防止频繁移入闪屏情况
vue垂直菜单可内嵌子菜单
05-10
是，Vue可以通过垂直菜单组件实现内嵌子菜单。你可以使用Vue的组件和指令来创建垂直菜单，然后使用Vue的条件渲染来控制子菜单的显示和隐藏。以下是一个简单的示例代码： ``` <template> <div class="menu"> <ul> <li v-for="item in menuItems" :key="item.id"> <a href="#" @click.prevent="toggleSubMenu(item)"> {{ item.label }} <span v-if="item.children" :class="{'arrow-down': !item.showSubMenu, 'arrow-up': item.showSubMenu}"></span> </a> <ul v-if="item.children && item.showSubMenu"> <li v-for="child in item.children" :key="child.id"> <a href="#">{{ child.label }}</a> </li> </ul> </li> </ul> </div> </template> <script> export default { data() { return { menuItems: [ { id: 1, label: '菜单1', children: [ { id: 11, label: '子菜单1-1' }, { id: 12, label: '子菜单1-2' } ], showSubMenu: false }, { id: 2, label: '菜单2', children: [ { id: 21, label: '子菜单2-1' }, { id: 22, label: '子菜单2-2' } ], showSubMenu: false } ] } }, methods: { toggleSubMenu(item) { item.showSubMenu = !item.showSubMenu; } } } </script> ``` 在这个示例中，我们创建了一个`menuItems`数组，其中包含两个菜单项，每个菜单项都可以有一个或多个子菜单项。我们使用`v-for`指令将菜单项和子菜单项渲染到页面上。我们还创建了一个`toggleSubMenu`方法，当用户点击菜单项时，它会切换子菜单的显示和隐藏。最后，我们使用条件渲染（`v-if`指令）来控制子菜单的显示和隐藏，以及箭头图标的方向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值