vue 菜单栏,vue实现顶部导航栏
这篇文章主要介绍了某视频剪辑软件顶部菜单栏实现小结，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
参考：
使用元素-用户界面的埃尔菜单导航选中后刷新页面保持当前选中状态
效果图1:
！-家
模板
div class=homeContainer
差异
style=
显示器：flex
高度：60px
行高：60px
对齐-项目：居中；
差异
style=
显示器：flex
对齐-项目：居中；
左边距：30px
光标：指针；
图片
src= http://河流地图文件。中国杭州OSS-。阿里云。com/LJ/WeServerManage/logo-we服务器。巴布亚新几内亚
style= width:40px；高度：40px右边距：10px
/
divxxx平台/div
/div
差异
style=
显示器：flex
对齐-项目：居中；
左边距：自动；
右边距：20px
a href= https://www。百度一下。 com/ rel=外部不跟随 rel=外部不跟随 target= _ blank
里外链百度/李
/a
里菜单1/李
埃尔-阿凡达
大小=小
src= https://立方体。eleme cdn。com/3/7c/3ea 6 beec 64369 c 2642 b 92c 6726 f1 epng。巴布亚新几内亚
style=margin: 0 5px
/el-avatar
李行政/李
/div
/div
/div
/模板
脚本
导出默认值{
姓名：家，
道具：{},
data() {
return { }；
},
方法：{},
};
/脚本
样式lang=scss 范围。homeContainer {
背景色：# 017bc4
李{
列表样式类型：无；
填充：0 10px
光标：指针；
：悬停{
背景色：rgba(0，0，0，0.124)；
}
}
}
/风格
效果图2:
！-家
模板
div class=homeContainer
差异
style=
显示器：flex
高度：60px
行高：60px
对齐-项目：居中；
差异
style=
显示器：flex
对齐-项目：居中；
左边距：30px
光标：指针；
图片
src= http://河流地图文件。中国杭州OSS-。阿里云。com/LJ/WeServerManage/logo-we服务器。巴布亚新几内亚
style= width:40px；高度：40px右边距：10px
/
divxxx平台/div
/div
埃尔菜单
默认-活动=2-4-2
模式=水平
background-color=#017bc4
text-color=white
active-text-color=橙色
style=margin-left: 30px
埃尔菜单项索引=1 首页/El-菜单项
埃尔-子菜单索引=2
模板槽=标题测试/模板
埃尔菜单项索引=2-1 选项1/el菜单项
埃尔菜单项索引=2-2 选项2/el菜单项
埃尔菜单项索引=2-3 选项3/el菜单项
埃尔-子菜单索引=2-4
模板槽=标题选项4/模板
埃尔菜单项索引=2-4-1 选项1/el菜单项
埃尔菜单项索引=2-4-2 选项2/el菜单项
埃尔菜单项索引=2-4-3 选项3/el菜单项
/El-子菜单
/El-子菜单
埃尔菜单项索引=3 已禁用消息中心/El-菜单项
/el-menu
div class=header_right
a href= https://www。百度一下。 com/ rel=外部不跟随 rel=外部不跟随 target= _ blank
里外链百度/李
/a
里菜单1/李
埃尔-阿凡达
大小=小
src= https://立方体。eleme cdn。com/3/7c/3ea 6 beec 64369 c 2642 b 92c 6726 f1 epng。巴布亚新几内亚
style=margin: 0 5px
/el-avatar
李行政/李
/div
/div
/div
/模板
脚本
导出默认值{
姓名：家，
道具：{},
data() {
返回{
主动索引2:“1”，
};
},
方法：{},
};
/脚本
风格
/* 取消过渡效果*/。埃尔-菜单项{
过渡-持续时间：0s；
}
/风格
样式lang=scss 范围。homeContainer {
背景色：# 017bc4。header_right {
显示器：flex
对齐-项目：居中；
左边距：自动；
右边距：20px
李{
列表样式类型：无；
填充：0 10px
光标：指针；
：悬停{
背景色：rgba(0，0，0，0.205)；
}
}
}
}
/风格
到此这篇关于某视频剪辑软件顶部菜单栏实现小结的文章就介绍到这了，更多相关某视频剪辑软件顶部菜单栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。