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

HTML文件代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery鼠标悬停上下滑动导航条 - 柯乐义</title><base target="_blank" />

<link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />

<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

<script>

$(document).ready(function() {

$("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' );

$("#hovertreecaidan li a").each(function() {

$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );

});

$("#hovertreecaidan li a").hover(function() {

$(".out",    this).stop().animate({'top':    '48px'},    300); // move down - hide

$(".over",    this).stop().animate({'top':    '0px'},     300); // move down - show

}, function() {

$(".out",    this).stop().animate({'top':    '0px'},     300); // move up - show

$(".over",    this).stop().animate({'top':    '-48px'},    300); // move up - hide

});

});

</script>

</head>

<body>

<div id="hovertreecaidan" class="hovertreedaohang">

<ul>

<li><a href="http://keleyi.com">首 页</a></li>

<li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>

<li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li>

<li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>

<li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>

<li><a href="http://hovertree.com/">HoverTree</a></li>

<li><a href="http://hovertree.com/texiao/">网页特效</a></li>

<li><a href="http://tool.keleyi.com/">工具</a></li>

<li><a href="http://hovertree.com/guestbook/">留言</a></li>

</ul>

<div class="hvtclear"></div>

</div>

</body>

</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. Java中Eclipse的使用

    Eclipse是跨平台的自由集成开发环境(IDE),初衷主要为Java语言的定制.第一次使用就喜欢上了它.它可以帮我们导入包,而不需要我们导入,有很多快捷键提供我们使用,方便节省时间:最值得我喜欢的是 ...

  2. Linux核心源码阅读方法

    首次阅读Linux4.0.5内核源代码时,一脸茫然,它的代码不仅复杂,而且庞大,找不到从哪里开始阅读. 通常Linux会有以下目录 arch 子目录包括所有和体系结构相关的核心代码.它还有更深的子目录 ...

  3. Change Line Type in OpenCascade

    Change Line Type in OpenCascade eryar@163.com 关键字KeyWords:OpenCascade,Line Aspect, Line Type 在OpenCa ...

  4. Spire.DOC生成表格测试

    首先,很感谢Jack对我的信任,让我来写一个评测,在此对Jack说一声抱歉,由于本人愚钝,并且最近项目比较紧张,把评测这个事情脱了一个月之久,由于往后的日子可能更忙,所以今晚抽空只能只写了一个小程序来 ...

  5. 白话贝叶斯理论及在足球比赛结果预测中的应用和C#实现

    离去年“马尔可夫链进行彩票预测”已经一年了,同时我也计划了一个彩票数据框架的搭建,分析和预测的框架,会在今年逐步发表,拟定了一个目录,大家有什么样的意见和和问题,可以看看,留言我会在后面的文章中逐步改 ...

  6. Neutron Vlan Network 原理- 每天5分钟玩转 OpenStack（92）

    前面我们陆续学习了 Neutron local network,flat network 和 DHCP 服务,从本节将开始讨论 vlan network. vlan network 是带 tag 的网 ...

  7. Util应用程序框架公共操作类(七):Lambda表达式公共操作类

    前一篇扩展了两个常用验证方法,本文将封装两个Lambda表达式操作,用来为下一篇的查询扩展服务. Lambda表达式是一种简洁的匿名函数语法,可以用它将方法作为委托参数传递.在Linq中,大量使用La ...

  8. 近期博客内容的规划（关于Swift语言）

    因为最近事情比较多,有一段时间没有发表博客了.前一段时间,利用空余时间翻译了一本关于Swif的书籍,过一段时间就会出版吧.通过翻译此书,英语水平没提高多少,不过Swift算是系统的学习了一下. 在翻译 ...

  9. 我的iOS开发系列博文

    之前目录性的总结了发表过的关于OC方面的文章,今天在目录性的总结一下有关iOS开发的文章.走过路过不要错过哦,今天的博文也全都是干货.写技术博客与大家交流一下思想也是不错的. 下面是我的技术博客中有关 ...

  10. How to implement a neural network

    神经网络的实践笔记 link: http://peterroelants.github.io/posts/neural_network_implementation_part01/ 1. 生成训练数据 ...