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. CSDN也有我的博客啦

    我的CSDN:https://blog.csdn.net/qq_40875849

  2. 关于display:inline-block的文章

    在淘宝UED博客里看到一篇关于display:inline-block的文章,有点啰嗦,反正我没看完,但是里面有些观点还是写得挺好的,直接贴地址mark一下.   文章地址:http://ued.ta ...

  3. win7开始菜单路径

    按Win + R, 输入C:\Users\zhouwanchun\AppData\Roaming\Microsoft\Windows\Start Menu 点击确定

  4. Spring IoC中各个注解的理解和使用

    一.把在Spring的xml文件中配置bean改为Spring的注解来配置bean 传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点:1.如果所有的 ...

  5. Android 硬编码

    public class TextViewActivity extends Activity { // 声明TextView对象 private TextView textView; @Overrid ...

  6. C Mysql API连接Mysql

    最近都在查看MYsql C API文档,也遇到了很多问题,下面来简单的做一个总结. mysql多线程问题 mysql多线程处理不好,经常会发生coredump,见使用Mysql出core一文. 单线程 ...

  7. 分享微信开发Html5轻游戏中的几个坑

    这段时间团队一直在做微信端的一些产品设计和开发,当然也包含一定的运营工作.做过的东西也不少,微名片.微抢票.微活动.微招聘等一些小case. 今天想说的是我们在微信中被玩的最活跃的轻游戏--微刮奖,这 ...

  8. Python列表生成式和生成器

    [1]列表生成器:列表生成式就是一个用来生成列表的特定语法形式的表达式. 1.基础语句结构:[exp for iter_var in iterable例如:a=[f(x) for x in range ...

  9. requests模块报错：Use body.encode('utf-8') if you want to send it encoded in UTF-8.

    在做 企业向微信用户个人付款  功能时,调用第三方sdk,在 进行 requests 的post请求时, 代码如下 req = requests.post(url, data=data,cert(ap ...

  10. slenium使用鼠标+键盘事件或者双击实现代码

    参考文章: https://www.ibm.com/developerworks/cn/java/j-lo-keyboard/