jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具，它在性能上极佳，快速滑动，基本无延迟效果，源码位置见对应作者的github，接下来附上样例代码：

 $(function () {

     $('.menu-left').menuAim({ // 插件的使用

         activate: activateSub,

         deactivate: deactivateSub,

         exitMenu: exitMenuSub // 必须加，负责处理最后一次移入问题

     });

 });

 function activateSub(row) { // 参数row自动获取当前元素

     var subId = $(row).data('sub-id'),

         $subMenu = $('#' + subId);

     $subMenu.show();

 }

 function deactivateSub() {

     $('.menu-right li').hide();

 }

 function exitMenuSub() {

     return true;

 }

 $(".menu-right li").mouseover(function () {

     $(this).show();

 });

 $('.menu-right li').mouseleave(function () {

      $(this).hide();

 });
 ul {

     list-style: none;

     padding:;

     margin:;

 }

 .menu {

     float: left;

 }

 .menu-left {

     width: 200px;

     float: left;

 }

 .menu-left li {

     height: 50px;

     line-height: 50px;

     text-align: center;

     background: #ccc;

 }

 .menu-right {

     width: 400px;

     float: left;

 }

 .menu-right li {

     height: 320px;

     background: #eee;

     display: none;

 }
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>navigation</title>

     <link rel="stylesheet" href="./index.css">

 </head>

 <body>

     <div class="menu">

         <ul class="menu-left">

             <li data-sub-id="hot">当季热门</li>

             <li data-sub-id="domestic">国内游</li>

             <li data-sub-id="overseas">海外游</li>

             <li data-sub-id="around">周边游</li>

         </ul>

         <ul class="menu-right">

             <li id="hot">

                 <div>one</div>

                 <div>one</div>

                 <div>one</div>

             </li>

             <li id="domestic">

                 <div>two</div>

                 <div>two</div>

                 <div>two</div>

             </li>

             <li id="overseas">

                 <div>three</div>

                 <div>three</div>

                 <div>three</div>

             </li>

             <li id="around">

                 <div>four</div>

                 <div>four</div>

                 <div>four</div>

             </li>

         </ul>

     </div>

     <script src="./jquery.js"></script>

     <script src="./jquery.menu-aim.js"></script>

     <script src="./index.js"></script>

 </body>

 </html>

jquery-menu-aim插件实现二级导航的更多相关文章

  1. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  3. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  4. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  5. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  6. 二级导航内容均分--jquery

    这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下. 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制. 原理: 1.把各个二级 ...

  7. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  8. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  9. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

随机推荐

  1. 学习笔记之Visual Studio Code & Clang

    Mac上XCode太占空间,卸载然后安装VSCode和Clang.在VSCode中再安装extension C/C++和Code Runner,配置Tasks: Configure Task,就可以开 ...

  2. 运用PowerDesigner的反向工程，可以导入SQL脚本，从而生成物理模型

    运用PowerDesigner的反向工程,可以导入SQL脚本,从而生成物理模型.方法/步骤 首先打开PowerDesigner,点击左上角“File”—>"Reverse Engine ...

  3. docker构建tomcat镜像

    下载centos镜像 # docker pull daocloud.io/centos:7 [root@localhost ~]# docker pull daocloud.io/centos: : ...

  4. 几个简单常用的jQuery实例

    一.点赞效果: 1.1 效果: 1.2 代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. element ui中dialog相关问题

    一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...

  6. MySQL 索引建立原则及注意事项

    一.索引建立的几大原则: 1) 最左前缀匹配原则,非常重要的原则,mysql会一直向右匹配直到遇到范围查询(>.<.between.like)就停止匹配,比如a = 1 and b = 2 ...

  7. adb显示 部分乱码修改方法

    用windows自带的命令行[cmd]软件链接adb 设备后,部分显示乱码,如下图片所示: 图1 修改方法如下: alias ls='busybox ls --color=never' 修改后显示正常 ...

  8. 解决 WordPress 4.9 页面模板功能无法正常使用

    WordPress 4.9 有一个重要更新是:在WP后台编辑主题和插件文件时,支持按层级显示所有文件.为了性能考虑,使用了 transient 缓存机制.但是却没有提供任何手动清除缓存的功能,导致有些 ...

  9. C语言：传值，传地址

    形参:形式参数实参:实际参数 传值: 把实参的值复制给形参, 修改函数内的形参,不会影响实参. 传地址: 指针传值,形参为指向实参地址的指针 当对形参的指向操作时,相当于对实参本身进行的操作 #inc ...

  10. string类和stringBuilder类

    字符串是C#中的一种重要数据类型,在项目开发中,离不开字符串操作.C#提供了string类实现字符串操作.于Convert类相似,string类中方法有静态方法和非静态方法.注意,在C#中String ...