vue2+若依框架+element-ui如何实现侧边栏改成顶部导航？(兼职解答合作私信)

已于 2024-03-28 10:19:03 修改
阅读量5.7k 收藏 40
点赞数 15
文章标签： vue.js 前端 javascript
于 2023-08-19 16:24:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzzzzzzzjy/article/details/132381015
版权
本文讲述了如何将Element-UI的侧边栏导航菜单从垂直布局改为水平布局并放置在顶部，涉及添加`horizontal`属性、调整`flex`和`sidebar-width`，以及解决样式冲突的问题。
摘要由CSDN通过智能技术生成

若依没有开启设置布局中的topnav的时候是这样的

 那如何做成这样呢？

 我们的思路是把垂直的侧边栏二级标题换成水平的，查看element-ui的官网可知NavMenu 导航菜单

 把vertical改成horizontal之后并把侧边栏组件放到顶部组件中发现它没有到上面去如下图

 于是给sidebar的el-menu组件加一个flex让它浮动上去

 加完之后是这样的

 侧边栏的空白区是多余的就把sidebar-width设置为0就好了

 最后顶部导航就出来，有同样需求的小伙伴可以试试，

有些人说还是不行，有可能是侧边导航换到顶部的时候，样式类名没改，还是侧边的样式当然上不去。换成顶部nav的样式名字试试

有很多人问我样式还是不行，，，，，

就改个类名啦

我贴一下我代码

赵不困888（合作私信）
关注
若依顶部导航栏Navbar一些个性化设置
字节叔叔
04-18 1042
代码所在位置
vue实现顶部菜单栏
01-18
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换 先看展示结果： 点击第一个按钮，显示内容1 点击第二个按钮，展示内容2 下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) 数据标注 案
vue-secondMenu-test:Vue + elementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
05-10
vue-secondMenu-test Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏 项目实现了登录功能，一二级菜单联动选择展示不同的主体内容部分，封装了 axios 请求库，还配置了管理员和普通用户的权限区分。 运行项目 npm install npm run dev
Element UI顶部导航栏与左侧导航栏联动实现~
最新发布
m0_62626838的博客
08-12 409
需求：点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。
Vue实现顶部标签以及左侧层级导航栏
weixin_48907405的博客
06-15 5403
场景：因为从数据需要分类，所以在主数据详情页要加一个顶部的标签来实现分类，再根据左侧的从数据id来实现浏览从数据，但是其中有一个分类下面又分了层类，所以要用到左侧导航栏，样式如下：第一种：左侧没有层级导航直接是从数据模块第二种：左侧从数据包含层级导航栏。
vue 实现顶部tab栏菜单（顶部tab按钮）切换（添加删除nav数据，适配微前端应用，滑动动画，右键菜单弹窗）
baidu_33164415的博客
12-23 3580
要做顶部tab栏切换，还需要配合菜单。这里主要讲tab栏的实现方式。首先为了在样式效果上实现方便，这里决定使用element-ui的el-tabs标签来做。这样只需要改下样式，其他效果例如切换动画都能保存。当然，除了el-tabs自带的删除等事件，这里还需要添加右键事件，在右键事件里面有关闭全部和关闭其他两个事件选项示例中主应用和子应用均使用history路由模式。
avue框架将左侧菜单栏换为顶置菜单栏
weixin_44770377的博客
04-30 3178
avue默认的左侧边栏如下： 修改为顶置菜单栏效果如下： 如何实现的？ 一、先注释左侧边栏的部分 二、新建一个子组件topMenuList <template> <div> <div style="display: flex;height: 60px;align-items: center;background-color:transparent;...
若依如何将侧边栏导航改为顶部导航
Keep__Me的博客
03-19 3007
若依系统的导航栏默认是在侧面的，如何改为在顶部呢？这篇我们通过修改代码的方式来将导航栏放到顶部。
若依左边菜单栏调到上方显示
weixin_54446335的博客
03-25 1265
我们一共需要改动这几个文件。
基于element-ui的顶部栏
jakelihua
06-27 971
该顶部栏提供了一个简单的登录功能，并以响应式的方式显示用户信息或登录按钮。// 处理用户登录成功的逻辑。/* 顶部栏内容样式 *//* 去除左右间隙 *//* 文字向上移动 *//* 按钮向上移动 *//* 左右间隙填充 *//* 文字向上移动 *//* 登录按钮样式 *//* 按钮向上移动 */// 登录对话框的可见性。/* 调整内边距 */// 登录成功后的处理。/* 内边距调整 *//* 垂直居上 */// 显示登录对话框。// 关闭登录对话框。/* 容器样式 *//* 垂直居上 */
vue2组件化开发（顶部导航、左侧导航等、根据宽度展开隐藏标签行）持续更新
Shi_haoliu的博客
12-06 1870
组件化开发目前有：顶部导航，左侧列表导航,根据宽度展开隐藏标签行
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
在Vue2和Element-UI框架下，开发一个具备el-aside侧边栏容器收缩与展开功能的应用是一项常见的任务。Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现...
基于Vue2+element-ui+AntV X6实现的流程图编辑器
11-02
基于Vue2+element-ui+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json...
基于vue2.0 +vuex+ element-ui后台管理系统.rar
02-20
2. **导航栏和侧边栏**：构建后台界面的布局框架，提供菜单和导航功能。 3. **按钮、图标和提示**：提供多种样式和功能的按钮、图标以及提示组件，增强用户交互体验。 4. **表单元素**：如输入框、选择器、日期选择...
vue-admin-java：Spring启动+ mybatis + vue + element-ui实现后台管理API接口https：lmxdawn.github.iovue-admin-java
01-29
前言 ...项目JAVA前端地址： 项目JAVA首次地址： ...欢迎星 要求java8版本 ...动态侧边栏 广告管理 在线演示 （建议使用最新版Chrome浏览器） 捐 鼓励鼓励鼓励，重要的事情说三遍 执照 版权所有（c）2018 lmxdawn
vue+element-ui 实现多级侧边栏导航
weixin_44193380的博客
11-22 6369
@效果图 导航菜单 <!--导航菜单--> <el-menu router :default-active="$route.path" v-show="!collapsed" unique-opened> <!-- 左侧导航栏抽取循环部分 将路由列表传给子组件--> <asideBarItem v-for="(router,index) ...
【Vue】实现置顶菜单div卡片切换效果（图文+完整源代码）
【敦厚的曹操】的专栏
05-16 777
<!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...
vue-element-admin实现顶部菜单栏，并可互相切换
热门推荐
qq_36365860的博客
09-03 1万+
先上传效果图 一、配置顶部菜单 1.复制一份src/layout/componets/Sidebar所有文件至同级目录，改名为Headbar，并在src/layout/components/index.js中声明Headbar 声明Headbar 2.修改Headbar/index.vue文件内容，主要删除了logo和更改了el-menu的mode属性为horizontal,并将name更改为Headbar； <template> <el-scrollbar .
若依顶部导航栏改造
简单点的博客
01-16 1491
若依顶部导航栏改造
vue3+element-ui后台管理模板
08-26
vue3 element-ui后台管理模板是一种用于构建现代化企业级后台管理系统的模板。它基于Vue.js 3框架和Element UI组件库开发，提供了丰富的可重用的UI组件和样式，方便开发人员快速搭建用户界面。 该模板采用了最新的Vue.js 3框架，具有更好的性能和更高的开发效率。它支持最新的ECMAScript 6标准和模块化开发，使代码更加模块化、可维护性更强。 Element UI是一套基于Vue.js的UI组件库，提供了丰富的UI组件，如表格、表单、弹窗、菜单等。这些组件具有统一的风格和交互效果，方便开发人员进行组件的组合和定制。 该模板还提供了一套完整的后台管理系统的布局和样式，包括侧边栏菜单、头部导航、面包屑导航等。这些布局和样式可以根据实际需求进行定制，方便开发人员快速构建出符合公司风格的后台管理系统。 除了UI组件和布局样式，该模板还集成了很多常用的功能和功能模块，如权限管理、数据表格、表单验证、路由管理等。这些功能和功能模块提供了一些通用的解决方案，方便开发人员进行快速开发和集成。 总体来说，vue3 element-ui后台管理模板是一种强大而灵活的工具，可以帮助开发人员快速构建现代化企业级后台管理系统。它提供了丰富的UI组件、布局样式和功能模块，可以大大提升开发效率和用户体验。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值