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. ylbtech-Java-Runoob-高级教程-实例-数组：15. Java 实例 – 判断数组是否相等

    ylbtech-Java-Runoob-高级教程-实例-数组:15. Java 实例 – 判断数组是否相等 1.返回顶部 1. Java 实例 - 判断数组是否相等  Java 实例 以下实例演示了如 ...

  2. CentOS搭建SVN服务器，并通过Apache HTTP方式访问

    摘要:本文主要讲述了在centos 6.5环境下搭建svn服务器,可通过svn:\\IP方式访问.同时由于部分公司内网端口限制,并不能访问外网的svn服务器,所以特地结合了apache服务器,使得可以 ...

  3. 学习笔记之Swagger

    World's Most Popular API Framework | Swagger https://swagger.io/ Swagger is the world’s largest fram ...

  4. Eclipse代码提示补全问题，自动选择第一个

    原地址 http://blog.csdn.net/liuhhaiffeng/article/details/7179243 Eclipse具有代码提示功能, 但是默认的提示只有在输入".&q ...

  5. 通过atomic_flag简单自旋锁实现简单说明标准库中锁使用的memory_order

    在使用标准库中的加锁机制时,例如我们使用std::mutex,写了如下的代码(下面的代码使用condition_variable可能更合适) std::mutex g_mtx; int g_resNu ...

  6. android 根据滑动隐藏或显示导航 类似手机QQ好友个人信息

    //重写ScrollView public class NotifyingScrollView extends ScrollView { /** * @author Cyril Mottier */ ...

  7. json--处理框架

    1.Android 中的Json解析工具fastjson .序列化.反序列化 2.Android Gson的使用总结 可以处理含有内部类的类,或包含集合内部类的类: 3.Android-JSONToo ...

  8. JDK1.6 Java.lang.Null.Pointer.Exception

    先来看一下JDK1.6的API: NullPointerException (Java Platform SE 6) public class NullPointerException extends ...

  9. jdbc连接池&改进dbUtil成C3P0Util

    一.jdbc连接池 1.连接池的存在理由   前面介绍的dbUtils工具类虽然实现了一个对jdbc的简单封装.但它依旧采取从驱动管理获取连接 (DriverManager.getConnection ...

  10. XML与 实体的相互转化

    using System; using System.Linq; using System.Xml; using System.Reflection; using System.Data; using ...