效果体验：
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. 【ssh信任关系】解决信任关系不生效问题

    配置的时候遇见点问题,发现即便将id_rsa.pub拷贝到了另一台机器上,信任也没有建立起来. 原因是另外一台机器上目录权限不对,可以通过su root后观察/var/log/message里的日志信 ...

  2. MongoDB 搭建副本集

    副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的更新由Primary ...

  3. setValue:forUndefinedKey this class is not key value coding-compliant for the key

    下午开发过程中遇到一个错误,结果被的真惨,从上午 11 点查错一直查到下午 2 点才找到错误的原因,真的郁闷的不行. 关于查错这么久,主要的原因是:   1. 自己对 IOS 开发还不熟悉2. 不知道 ...

  4. 【WP开发】不同客户端之间传输加密数据

    在上一篇文章中,曾说好本次将提供一个客户端之间传输加密数据的例子.前些天就打算写了,只是因一些人类科技无法预知的事情发生,故拖到今天. 本示例没什么技术含量,也没什么亮点,Bug林立,只不过提供给有需 ...

  5. Android之genymotion模拟器安装于配置

    今天是双休日,可怜没人陪,只好一个人玩电脑了,之前别人一直给我推荐genymotion模拟器,说各种方便,秒杀Android自带模拟器,所以就趁这个周末搞了一下,总体感觉还挺不错的,确实比Androi ...

  6. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  7. CRL通用权限控制系统

    此系统能满足一般权限/菜单控制需求,不需要重复开发,达到多系统共用的目的 权限判断是基于请求路径,意味着是页面级控制,可能不符合一些要求,当然你也可以把路径细化实现 菜单为二级菜单,暂不支持多级 此系 ...

  8. 追根溯源：EntityFramework 实体的状态变化

    阅读目录: 1. 应用场景 2. 场景测试 3. 问题分析 4. 追根溯源 5. 简要总结 1. 应用场景 首先,应用程序使用 EntityFramework,应用场景中有两个实体 S_Class(班 ...

  9. PowerDesigner导出Report通用报表

    PowerDesigner导出Report通用报表 通用模板下载地址:http://pan.baidu.com/s/1c0NDphm

  10. Java多线程系列--“JUC锁”02之 互斥锁ReentrantLock

    本章对ReentrantLock包进行基本介绍,这一章主要对ReentrantLock进行概括性的介绍,内容包括:ReentrantLock介绍ReentrantLock函数列表ReentrantLo ...