开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 dedecms 苹果 修真图
当前位置：首页 > 网页特效 > 其他 >  跨平台多级下拉菜单 Vegas Nav

跨平台多级下拉菜单 Vegas Nav

  • 源码大小：186.3KB
  • 所需积分：1积分
  • 源码编号：19JP-3187
  • 浏览次数：640次
  • 最后更新：2023年05月16日
  • 所属栏目：其他
我要下载 浏览效果
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 360压缩
[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板

简介

Vegas Nav是一个JavaScript驱动的跨平台导航系统，可帮助您为web应用程序创建一个响应灵敏、移动友好、多级下拉导航栏。

更多功能：

  • 在小屏幕上将导航栏折叠为画布外的侧导航。
  • 支持台式机、笔记本电脑、平板电脑和移动设备。
  • 支持多列超级菜单。
  • 超轻，使用非常简单。
  • 语义和SEO友好。使用嵌套的HTML列表构建。
  • 没有第三方依赖关系（v3+）。
  • Scrollspy功能（v3+）。

请参阅实际操作：

参见：

  • JavaScript和CSS中的10个最佳画布外移动菜单

如何使用它:

1.加载核心样式表vgnav.css格式和主题CSSvgnav主题.css在文档中。

  1. <link href="/path/to/dist/vgnav.css" rel="stylesheet" />
  2. <link href="/path/to/demo/css/vgnav-theme.css" rel="stylesheet" />

2.从嵌套的HTML列表中创建一个多级下拉导航栏，如下所示：

  1. <nav class="vg-nav">
  2.   <ul class="vg-nav-wrapper">
  3.     <li class="active">
  4.       <a href="/">Home page</a>
  5.     </li>
  6.     <li class="dropdown">
  7.       <a href="#">Left dropdown</a>
  8.       <ul class="left">
  9.         <li><a href="/">Any page</a></li>
  10.         <li class="dropdown">
  11.           <a href="#">Second level</a>
  12.           <ul class="left">
  13.             <li><a href="/">Another page</a></li>
  14.             <li><a href="/">Any page</a></li>
  15.             <li class="dropdown">
  16.               <a href="#">Third level</a>
  17.               <ul class="left">
  18.                 <li><a href="/">Any page</a></li>
  19.                 <li><a href="/">Another page</a></li>
  20.               </ul>
  21.             </li>
  22.           </ul>
  23.         </li>
  24.         <li><a href="/">Another page</a></li>
  25.       </ul>
  26.     </li>
  27.     <li class="dropdown-mega">
  28.       <a href="/">Mega Menu</a>
  29.       <div class="dropdown-mega-container">
  30.         <div class="row">
  31.           <div class="col-md-4 text-left">
  32.             Left
  33.           </div>
  34.           <div class="col-md-4 text-center">
  35.             Center
  36.           </div>
  37.           <div class="col-md-4 text-right">
  38.             Right
  39.           </div>
  40.         </div>
  41.       </div>
  42.     </li>
  43.     <li class="dropdown">
  44.       <a href="#">Right dropdown</a>
  45.       <ul class="right">
  46.         <li><a href="/">Any page</a></li>
  47.         <li class="dropdown">
  48.           <a href="#">Second level</a>
  49.           <ul class="right">
  50.             <li><a href="/">Another page</a></li>
  51.             <li><a href="/">Any page</a></li>
  52.             <li class="dropdown">
  53.               <a href="#">Third level</a>
  54.               <ul class="right">
  55.                 <li><a href="/">Any page</a></li>
  56.                 <li><a href="/">Another page</a></li>
  57.               </ul>
  58.             </li>
  59.           </ul>
  60.         </li>
  61.         <li><a href="/">Another page</a></li>
  62.       </ul>
  63.     </li>
  64.   </ul>
  65. </nav>

3.加载主JavaScriptvgnav.min.js版本在文件末尾。请注意，该插件从v3.0开始就删除了对jQuery的依赖。

  1. <script src="/path/to/dist/vgnav.umd.js"></script>

4.初始化插件并完成。

  1. new VGNav({
  2.     // options
  3. });

5.确定导航条将在哪个断点折叠成汉堡包按钮，使访问者能够切换画布外菜单。

  • 第xxl条：特大型
  • xl: 台式机和笔记本电脑
  • 长度：平板电脑横向
  • 医学博士：平板电脑肖像
  • 标准时间：智能手机领域
  • xs:智能手机画像
  1. new VGNav({
  2.     expand: 'lg',
  3. });

5.改为从屏幕左侧滑入画布外的侧导航。

  1. new VGNav({
  2.     sidebar: {
  3.       placement: 'left',
  4.       clone: null,
  5.       width: 250
  6.     }
  7. });

6.在悬停时打开下拉菜单，而不是单击。

  1. new VGNav({
  2.     isHover: true
  3. });

7.确定导航的位置。默认值：“水平”。

  1. new VGNav({
  2.     placement: 'vertical'
  3. });

8.添加用于移动导航的自定义标题。

  1. let vg_nav = new VGNav('#myNav',{
  2.     mobileTitle: 'Navigation'
  3. });

9.自定义切换元素。

  1. new VGNav({
  2.     toggle: '<span class="default"></span>'
  3. });

10.自定义hambursh按钮。

  1. new VGNav({
  2.     expand: 'lg',
  3.     mobileTitle: 'Mobile Title',
  4.     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>'
  5. });

11.如果所有链接的总宽度大于主容器，则将链接移动到下拉菜单。。

  1. new VGNav({
  2.     move: true,
  3. });

更新日志：

版本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下拉菜单多级跨平台
上一篇：用户友好 谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：JSON模板将JSON转换为HTML json2html.js

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1