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. jQuery的遍历

    jQuery有众多的方法,但是有些方法过于累赘,所以就精简了一些重要的方法,记住这些方法的(名字,功能,参数) jQuery的遍历 1.add() 将元素添加到集合中 2.children() 返回被 ...

  2. centos7部署openvpn-2.4.6

    一.环境说明 返回主机的IP地址 # ip a | grep "scope global" | awk -F'[ /]+' '{print $3}' | head -1 [root ...

  3. 虚幻4：2D游戏中实现二级或多级跳跃

    转自:http://www.52vr.com/article-729-1.html 闲来无事,想做个二级跳跃或者多级跳跃的方法.. 如下所示.即可实现.   第一步:角色蓝图中.设置跳跃事件 第二部: ...

  4. 解决在word中不能使用输入法

    打开一个Word文档-------------->单击 文件---->选项---->高级---->取消什么?看图 然后重新启动word

  5. centos7安装zookeeper3.4.12集群

    zookeeper的三要素: 1.一致,能够保证数据的一致性 2.有头,始终有一个leader,node/2+1个节点有效,就能正常工作 3.数据树,树状结构且每个树必须有数据 1. 环境准备 操作系 ...

  6. Delphi StringGrid控件的用法

    Delphi StringGrid控件 组件名称:StringGrid         ●固定行及固定列:  StringGrid.FixedCols:=固定行之数;  StringGrid.Fixe ...

  7. RabbitMQ install (Ubuntu)

    1. key 1) Online way apt-key adv --keyserver "hkps.pool.sks-keyservers.net" --recv-keys &q ...

  8. 如何在ubuntu系统里面用新加装的硬盘对系统进行扩容

    我这里是用256G的固态硬盘安装了系统,想通过扩展1T的机械硬盘存储数据的,现在我们需要的就是把这个1T的硬盘进行扩容进去 使用df -h和sudo fdisk -l命令查看磁盘情况 切换到root用 ...

  9. Getting Physical With Memory.CPU如何操作内存

    原文标题:Getting Physical With Memory 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精彩文章翻译一下 ...

  10. RSA加密解密，String转PublicKey、PrivateKey；附Base64.JAR

    网络请求的数据需要加密,服务器给的他们那一套在Android一直报错,自己写了一个: package com.cc.common.util; import javax.crypto.Cipher; i ...