效果体验：
http://keleyi.com/keleyi/phtml/jqtexiao/39.htm

HTML文件代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义</title><base target="_blank" />
  5. <link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />
  6. <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
  7. <script>
  8. $(document).ready(function() {
  9. $("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' );
  10. $("#hovertreecaidan li a").each(function() {
  11. $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
  12. });
  13. $("#hovertreecaidan li a").hover(function() {
  14. $(".out",    this).stop().animate({'top':    '48px'},    300); // move down - hide
  15. $(".over",    this).stop().animate({'top':    '0px'},     300); // move down - show
  16. }, function() {
  17. $(".out",    this).stop().animate({'top':    '0px'},     300); // move up - show
  18. $(".over",    this).stop().animate({'top':    '-48px'},    300); // move up - hide
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div id="hovertreecaidan" class="hovertreedaohang">
  25. <ul>
  26. <li><a href="http://keleyi.com">首 页</a></li>
  27. <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
  28. <li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li>
  29. <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
  30. <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
  31. <li><a href="http://hovertree.com/">HoverTree</a></li>
  32. <li><a href="http://hovertree.com/texiao/">网页特效</a></li>
  33. <li><a href="http://tool.keleyi.com/">工具</a></li>
  34. <li><a href="http://hovertree.com/guestbook/">留言</a></li>
  35. </ul>
  36. <div class="hvtclear"></div>
  37. </div>
  38. </body>
  39. </html>

其中jQuery的wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

参考：http://hovertree.com/hvtart/bjae/m66osaoc.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

这个jQuery导航菜单怎么样的更多相关文章

  1. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  2. 分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型 ...

  3. [Jquery]导航菜单效果-纵向

    $( document ).ready( function(e){ var $catCont = $( ".cat-cont" );    //二级菜单div    var $ca ...

  4. jQuery导航菜单防刷新

    为了实现最主要的功能,只写了一个粗糙的案例 CSS样式 ul,li{ list-style-type:none;} .nav { width: 100%; height: 35px; line-hei ...

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

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

  6. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  7. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  9. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

随机推荐

  1. 在MacOS 10.12上安装Tomcat8.5

    在MacOS 10.12上安装Tomcat8.5 原文链接:https://wolfpaulus.com/journal/mac/tomcat8/ Context 已安装Java,使用java -ve ...

  2. 在Thinkphp3.2.3框架下实现自动获取客户端IP地址的get_client_ip()函数

    在Thinkphp框架下使用get_client_ip()函数获取客户端IP地址十分方便: 一行代码便可以实现:$ip = get_client_ip(); 但当我们测试时会遇到后台获取的IP地址显示 ...

  3. (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

    (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKi ...

  4. 【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

    box-shadow 在前端的 CSS 编写工作想必十分常见.但是 box-shadow 除去它的常规用法,其实还存在许多不为人知的奇技淫巧. 喜欢 markdown 版本的可以戳这里. box-sh ...

  5. Java内存模型深度解析：顺序一致性--转

    原文地址:http://www.codeceo.com/article/java-memory-3.html 数据竞争与顺序一致性保证 当程序未正确同步时,就会存在数据竞争.java内存模型规范对数据 ...

  6. spring源码分析之spring-core-env

    看一下源码整体: 抓住主要点,Environment.PropertyResolver.PropertySource,其结构如下: 其中, Environment:Interface represen ...

  7. 虚拟机利用Host-only实现在不插网线的情况下，虚拟机与主机实现双向通信，实现ssh连接以及samba服务实现共享

    为了不影响其他的虚拟网卡,我们在VMware下在添加一块虚拟网卡: 然后点击Next,选择连接方式: 点击Finish即可. 重新启动虚拟机,如果这是你手动添加的第一块虚拟网卡,那么应该是eth1. ...

  8. 关于一道PHP面试题的解法

    参照一个int型数组,如int[] a1=new int[]{10,9,10,20,15,3,9,8,7,1,1},编写一个方法,要求输出不重复,且降序的拼接字符串(连接字符用逗号),如上数组,输出的 ...

  9. 我的angularjs源码学习之旅2——依赖注入

    依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...

  10. 给 C# 开发者的代码审查清单

    这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...