效果体验：
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. Spring学习记录(十一)---使用注解和自动装配

    Spring支持用注解配置Bean,更简便. 上面的组件,是根据实际情况配的.比如写的一个类,是做业务处理的,那就用注解@Service表示服务层组件,以此类推.将整体分成不同部分. 要在xml加入c ...

  2. BUG级别定义标准

    通过图片另存为 或者 放大浏览器倍率 查看.

  3. ECMAScript6学习笔记 ——let、const、变量解构赋值

    let 不存在变量提升 通过let声明的变量仅在块级作用域内有效 不允许在同一个作用域内重复声明一个变量 防止值公用 var oUl = document.querySelectorAll('ul&g ...

  4. Sql Server系列：流程控制语句

    T-SQL中用来编写流程控制模块的语句有:BEGIN...AND语句.IF...ELSE语句.CASE语句.WHILE语句.GOTO语句.BREAK语句.WAITFOR语句和RETURN语句. 1 B ...

  5. C#设计模式系列：模板方法模式（Template Method）

    你去银行取款的时候,银行会给你一张取款单,这张取款单就是一个模板,它把公共的内容提取到模板中,只留下部分让用户来填写.在软件系统中,将多个类的共有内容提取到一个模板中的思想便是模板方法模式的思想. 模 ...

  6. SpringMVC+FreeMarker

    前言: 最近在学习SpringMVC,模板引擎用的是FreeMarker,之前没有接触过.利用SpringMVC开发其实还有许多的步骤,比如控制层,服务层,持久化层,实体等等,先弄了一个小demo来总 ...

  7. 外网访问原理分析 - 每天5分钟玩转 OpenStack（105）

    本节我们会将上节创建的 ext_net 连接到 router,并验证内外网的连通性. 更重要的,我们会分析隐藏在表象之下的原理. 将外网连接到 Neutron 的虚拟路由器,这样 instance 才 ...

  8. Markdown编辑器入门

    欢迎使用博客园的Markdown编辑器 前言 今天早上起来在Ubuntu下操作,所以不能使用Windows Live Writer.所以就直接使用博客园的后台编辑器,开始以为博客园出错了,怎么编辑都没 ...

  9. 关于SubSonic3.0插件使用SqlQuery或Select查询时产生的System.NullReferenceException异常修复

    早上在编写执行用例时,突然爆异常System.NullReferenceException: 未将对象引用设置到对象的实例 执行代码:

  10. 在Linux（ubuntu server）上面安装NodeJS的正确姿势

    上一篇文章,我介绍了 在Windows中安装NodeJS的正确姿势,这一篇,我们继续来看一下在Linux上面安装和配置NodeJS. 为了保持一致,这里也列举三个方法 第一个方法:通过官网下载安装 h ...