最新资源
简介
Vegas Nav是一个JavaScript驱动的跨平台导航系统，可帮助您为web应用程序创建一个响应灵敏、移动友好、多级下拉导航栏。
更多功能：
- 在小屏幕上将导航栏折叠为画布外的侧导航。
- 支持台式机、笔记本电脑、平板电脑和移动设备。
- 支持多列超级菜单。
- 超轻，使用非常简单。
- 语义和SEO友好。使用嵌套的HTML列表构建。
- 没有第三方依赖关系（v3+）。
- Scrollspy功能（v3+）。
请参阅实际操作：
参见：
- JavaScript和CSS中的10个最佳画布外移动菜单
如何使用它:
1.加载核心样式表vgnav.css格式和主题CSSvgnav主题.css在文档中。
<link href="/path/to/dist/vgnav.css" rel="stylesheet" /> <link href="/path/to/demo/css/vgnav-theme.css" rel="stylesheet" />
2.从嵌套的HTML列表中创建一个多级下拉导航栏，如下所示：
<nav class="vg-nav">
<ul class="vg-nav-wrapper">
<li class="active">
<a href="/">Home page</a>
</li>
<li class="dropdown">
<a href="#">Left dropdown</a>
<ul class="left">
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Second level</a>
<ul class="left">
<li><a href="/">Another page</a></li>
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Third level</a>
<ul class="left">
<li><a href="/">Any page</a></li>
<li><a href="/">Another page</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/">Another page</a></li>
</ul>
</li>
<li class="dropdown-mega">
<a href="/">Mega Menu</a>
<div class="dropdown-mega-container">
<div class="row">
<div class="col-md-4 text-left">
Left
</div>
<div class="col-md-4 text-center">
Center
</div>
<div class="col-md-4 text-right">
Right
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#">Right dropdown</a>
<ul class="right">
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Second level</a>
<ul class="right">
<li><a href="/">Another page</a></li>
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Third level</a>
<ul class="right">
<li><a href="/">Any page</a></li>
<li><a href="/">Another page</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/">Another page</a></li>
</ul>
</li>
</ul>
</nav>
3.加载主JavaScriptvgnav.min.js版本在文件末尾。请注意，该插件从v3.0开始就删除了对jQuery的依赖。
<script src="/path/to/dist/vgnav.umd.js"></script>
4.初始化插件并完成。
new VGNav({
// options
});
5.确定导航条将在哪个断点折叠成汉堡包按钮，使访问者能够切换画布外菜单。
- 第xxl条：特大型
- xl:Â 台式机和笔记本电脑
- 长度：平板电脑横向
- 医学博士：平板电脑肖像
- 标准时间：智能手机领域
- xs:智能手机画像
new VGNav({
expand: 'lg',
});
5.改为从屏幕左侧滑入画布外的侧导航。
new VGNav({
sidebar: {
placement: 'left',
clone: null,
width: 250
}
});
6.在悬停时打开下拉菜单，而不是单击。
new VGNav({
isHover: true
});
7.确定导航的位置。默认值：“水平”。
new VGNav({
placement: 'vertical'
});
8.添加用于移动导航的自定义标题。
let vg_nav = new VGNav('#myNav',{
mobileTitle: 'Navigation'
});
9.自定义切换元素。
new VGNav({
toggle: '<span class="default"></span>'
});
10.自定义hambursh按钮。
new VGNav({
expand: 'lg',
mobileTitle: 'Mobile Title',
hamburger: '<svg id="ham-menue" viewBox="0 0 100 100"><path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"></path><path class="line line2" d="M 20,50 H 80"></path><path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"></path></svg>'
});
11.如果所有链接的总宽度大于主容器，则将链接移动到下拉菜单。。
new VGNav({
move: true,
});
更新日志：
版本3.2.0/1（2023-02-11）
- 错误修复
第3.1.9版（2023-01-13）
- 错误修复
第3.1.6版（2022-12-17）
- 错误修复
第3.1.5版（2022-12-13）
- 错误修复
版本3.1.4（2022-11-17）
- 如果所有链接的总宽度大于主容器，则自动将链接转移到下拉菜单。已引入“移动”参数
版本3.1.1（2022-11-10）
- 如果所有链接的总宽度大于主容器，则自动将链接移动到下拉菜单。已引入“移动”参数
第3.1.0版（2022-09-27）
- 定制汉堡和套餐
版本3.0.8（2022-07-14）
- 修复isHover
3.0.6版（2022-06-292）
- 删除了滚动间谍功能
3.0.5版（2022-06-22）
- 错误修复
版本3.0.0（2022-06-22）
- 完全重写，修复了错误。
- 添加了VGSidebar和VGSpy插件
v2.0.5版本（2022-06-06）
- 导出公共Api
v2.0.4版本（2022-05-18）
- 使现代化
2.0.3版（2021-07-22）
- 添加了移动导航的标题。在设置中指定｛mobileTitle:“Navigation”｝
v2.0.2版本（2020-11-21）
- 使现代化
v2.0.1版本（2020-11-14）
- 更改的插件标记
v2.0.0版本（2020-11-09）
- 更改的插件标记
- 添加了回调
- 修复了错误
v1.1.5 (2020-07-25)
- 修正了已知错误
v1.1.4 (2020-07-06)
- 已为Firefox修复
2020-06-29
- 已修复Bug
2020-06-03
- 修正了已知错误
2020-05-09
- 错误修复
2020-03-25
- 切换自定义
- 修正了已知错误
2020-03-18
- 错误修复
2020-03-17
- 悬停时打开子菜单
2020-03-10
- 修复了错误。
2020-03-05
- 添加了左侧菜单。
2020-03-03
- 更新的侧边栏宽度
预览截图
跨平台多级下拉菜单 Vegas Nav