效果体验：
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. 高德地图-搜索服务-POI搜索

    高德地图-搜索服务-POI搜索 之前公司项目收货地址仿饿了么的收货地址,结果发现自己实现的关键字搜索和周边搜索,搜索到的poi列表跟饿了么的并不完全一样,后来考虑了下,应该是搜索的范围.类型之类的设置 ...

  2. Uiautomator 2.0之UiDevice新增API学习小记

    1. InstrumentationRegistry类 1.1. 类说明: 一个暴露的注册实例,持有instrumentation运行的进程和参数,还提供了一种简便的方法调用instrumentati ...

  3. CSS3总结 （帅哥）

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷 ...

  4. Undo/Redo for Qt Tree Model

    Undo/Redo for Qt Tree Model eryar@163.com Abstract. Qt contains a set of item view classes that use ...

  5. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  6. MVC实用架构设计（三）——EF-Code First（4）：数据查询

    前言 首先对大家表示抱歉,这个系列已经将近一个月没有更新了,相信大家等本篇更新都等得快失望了.实在没办法,由于本人水平有限,写篇博客基本上要大半天的时间,最近实在是抽不出这么长段的空闲时间来写.另外也 ...

  7. JavaScript之自我总结篇

    最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...

  8. SubSonic3.0.0.4.3源码包与调用Dll

    版本修改历史 3.0.0.4.3版修复了下面问题: 修正多表关联查询时,使用左关联和右关联出错问题修正DbDataProvider.cs类的ToEnumerable函数打开数据库链接后没有关闭的问题添 ...

  9. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  10. iOS开发之新浪微博山寨版代码优化

    之前发表过一篇博客“IOS开发之新浪围脖”,在编写代码的时候太偏重功能的实现了,写完基本功能后看着代码有些别扭,特别是用到的四种cell的类,重复代码有点多,所以今天花点时间把代码重构一下.为了减少代 ...