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. 延时队列：Java中的DelayQueue

    Java中的DelayQueue位于java.util.concurrent包下,本质是由PriorityQueue和BlockingQueue实现的阻塞优先级队列. 放入队列的元素需要实现java. ...

  2. Oracle ORA 6510

    解决方法待补充 咨询得到的解析是: plsql写的存储过程在导出后需要重新编译才能执行:需要处理好这方面的关系

  3. Laravel 5.5 FormRequest 自定义错误消息 postman调试时X-Requested-With设为XMLHttpRequest

    Laravel 5.5 FormRequest 自定义错误消息 使用FormRequest进行表单验证,就不用让验证逻辑和控制器里面的逻辑都混在一起.但在使用的时候呢,发现json错误返回的数据,与我 ...

  4. 开关Windows休眠功能

    在windows休眠的时候会把内存里的数据缓存到硬盘的C:/Hiberfil.sys文件,万一断电能够从中恢复状态,然而这对SSD硬盘损耗很大,如果没必要还是关了吧: 关闭: powercfg -h ...

  5. Can't create handler inside thread that has not called Looper.prepare()

    Looper.prepare(); // Can't create handler inside thread that has not called Looper.prepare(). Toast. ...

  6. Django中的跨表查询，多表查询。

    一:Django中的ORM进行操作. 必须掌握的十三条: <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 & ...

  7. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  8. day5--装饰器函数的信息打印，迭代器，生成器，列表推导式，内置函数

    本文档主要内容: 一 装饰器函数的信息打印 二 迭代器 三 生成器 四 生成器表达式和列表推导式 五 内置函数 一 装饰器函数的信息打印 一个函数一旦被装饰器给装饰后,这个函数的信息使用原来的命令打印 ...

  9. tkinter获取键盘输入

    tkinter获取键盘输入

  10. Linux关键字查询

    grep -R "查询关键字" /目录/*