效果预览：http://keleyi.com/keleyi/phtml/html5/15/

有都中颜色可供选择，请使用支持HTML5/CSS3的浏览器访问。

HTML源代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery和css3滑动导航菜单-柯乐义</title><base target="_blank" />

 <link type="text/css" rel="stylesheet" media="all" href="http://keleyi.com/keleyi/phtml/html5/15/css/keleyi.css" />

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script src="http://keleyi.com/keleyi/phtml/html5/15/js/keleyi.js" type="text/javascript"></script>

 </head>

 <body>

 <div id="wrapper">

 <div class="header">

 <h1><a href="http://keleyi.com"><img src="http://keleyi.com/keleyi/phtml/html5/15/images/logo-small.png" /></a>jquery和css3滑动导航菜单 CSS3 Fancy Menu / keleyi Menu</h1>

 <p>请使用支持HTML5/CSS3的浏览器访问本页。A CSS3 Experiment by <a href="http://keleyi.com">insicdesigns</a></p>

 </div>

 <div class="keleyi" >

 <ul>

 <li class="active"><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>

 <li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li><li><a href="http://keleyi.com/menu/cpp/" >C++</a></li>

 <li><a href="http://keleyi.com/ziliao/js/zzbds.htm">JS正则表达式</a></li></ul>

 <div class="floatr"></div>

 </div>

 <h2>Experimenting with colors <a href="http://keleyi.com/a/bjac/21poi7ce.htm">原文</a></h2>

 <p>Gradients can only be seen on Webkit browser (Chrome, Safari).</p>

 <div class="keleyi magenta">

 <ul >

 <li class="active"><a href="http://keleyi.com/">Home</a></li>

 <li><a href="http://keleyi.com/about/">About</a></li>

 <li><a href="http://keleyi.com/game/1/">捕鱼</a></li>

 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>

 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li>

 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li>

 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li>

 <li><a href="http://keleyi.com/game/4/">美女拼图</a></li>

 <li><a href="http://keleyi.com/keleyi/phtml/silverlight/">猜数字</a></li>

 </ul>

 <div class="floatr"></div>

 </div>

 <br />

 <div class="keleyi cyan">

 <ul >

 <li class="active"><a href="http://keleyi.com/a/bjac/4pdfle7v.htm">动画导航菜单</a></li><li><a href="http://keleyi.com/a/bjac/nk1dr8xn.htm">window的高宽</a></li>

 <li><a href="http://keleyi.com/a/bjac/cx165ov3.htm">jQuery的使用</a></li><li><a href="http://keleyi.com/a/bjac/4saw3kmj.htm">jQ优势与不足</a></li>

 <li><a href="http://keleyi.com/a/bjac/25mku22l.htm">jQuery介绍</a></li><li><a href="http://keleyi.com/a/bjac/6c5snbtc.htm">div子元素</a></li>

 <li><a href="http://keleyi.com/a/bjac/8p1g5yeq.htm">JQ鼠标位置</a></li>

 </ul>

 <div class="floatr"></div>

 </div>

 <br />

 <div class="keleyi yellow">

 <ul >

 <li class="active"><a href="http://keleyi.cn">三级菜单</a></li><li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">图片走马灯</a></li><li><a href="http://keleyi.com/a/bjac/90b914o0.htm">jQ的toggle</a></li>

 <li><a href="http://keleyi.com/a/bjac/bg0m15bi.htm">jQ方法on()</a></li><li><a href="http://keleyi.com/a/bjac/scdm44l9.htm">侧边栏导航</a></li><li><a href="http://keleyi.com/a/bjac/1ln3kvac.htm">jQ的live()</a></li>

 <li><a href="http://keleyi.com/a/bjac/n5kb0y0j.htm">jQ的find()</a></li><li><a href="http://keleyi.com/a/bjac/4013kn5s.htm">jquery的on</a></li>

 </ul>

 <div class="floatr"></div>

 </div>

 <br />

 <div class="keleyi orange">

 <ul >

 <li class="active"><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航栏</a></li><li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">当前时间</a></li>

 <li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">替换图片</a></li><li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="jQuery友善的图片轮播(含首页和尾页)">图片轮播</a></li><li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">appendTo方法</a></li>

 <li><a href="http://keleyi.com/a/bjac/0vpch15n.htm">jQ的append</a></li><li><a href="http://keleyi.com/a/bjac/cfyxd60g.htm">jQ的after</a></li>

 <li><a href="http://keleyi.com/a/bjac/m9xwhxv2.htm">判断是否为空</a></li>

 </ul>

 <div class="floatr"></div>

 </div>

 <br />

 <div class="keleyi dark">

 <ul >

 <li class="active"><a href="http://keleyi.com/a/bjac/2oncd079.htm" title="jQ函数after、append、appendTo的区别">after、append</a></li><li><a href="http://keleyi.com/a/bjac/db2b8j9b.htm">JQUERY ajax</a></li>

 <li><a href="http://keleyi.com/a/bjac/dbjlg7nf.htm" title="jQuery表单验证插件 jQuery.validity">表单验证插件</a></li>

 <li><a href="http://keleyi.com/a/bjac/otjlqc2l.htm">jquery ajax</a></li><li><a href="http://keleyi.com/a/bjac/3wdrld0b.htm">removeAttr</a></li>

 <li><a href="http://keleyi.com/a/bjac/lx3u7na0.htm">使a链无效</a></li><li><a href="http://keleyi.com/a/bjac/4prgqlce.htm">ready的简写</a></li>

 </ul>

 <div class="floatr"></div>

 </div>

 </div>

 </body>

 </html>

原文：http://keleyi.com/a/bjac/21poi7ce.htm

更多菜单：http://keleyi.com/a/bjac/veugsmw9.htm

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

jquery和css3实现滑动导航菜单的更多相关文章

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

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

  2. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  3. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  4. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  5. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  6. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  8. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  9. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

随机推荐

  1. C#设计模式-享元模式

    在软件开发过程,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次地去申请内存空间了,这样可能会出现内存使用越来越多的情况,这样的问题是非常严重,然 ...

  2. iOS---iOS9搜索功能

    前言 在iOS9之前我们只能使用Spotlight来搜索应用名称来打开指定App,而其他的内容都是提供给系统使用(信息,联系人,邮件等).在iOS9以后Apple允许开发者设置应用中任意内容可以被Sp ...

  3. 使用批处理设置JDK环境变量（Win7可用，新版本）

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处http://www.cnblogs.com/nullzx/ 1. JDK环境的设置 一般情况下来说按照网上大多数的教程设置JDK的环境变量即可.但对于 ...

  4. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  5. CSS系列：CSS中盒子之间的关系

    1. 标准文档流 标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...

  6. Hibernate的数据查找，添加！

    1.首先看一下测试数据库的物理模型 2.测试所需要的Hibernate的jar包 3.数据库的sql /*=============================================== ...

  7. Ruby之入门（一）

    前言 这门语言很少去听过,可能是没怎么用到就不会听到太多关于ruby的消息,工作需要这门语言,需要从0开始学习这门语言,慢慢学习简直...太神奇了...,原谅我见识浅薄.原来很早就已经出世了,园子中也 ...

  8. Rust初步（三）：使用atom搭配racer进行rust编程

    在rust.cc社区中有一个关于rust编辑器的讨论(话说很多人要学一个新语言,都会立即考虑编辑器的问题,包括我在内),主要关注的是,智能提示(这个真的太重要了).大家讨论下来有几个选择 1. ecl ...

  9. 延时调用--deferred.js原码分析

    有些时候,我们需要等待上一个操作完成之后,才能进行下一步的操作.比如Ajax实现自动提交表单操作的时候,程序需要等待,一旦有返回结果了,则继续进行一下步操作. 这时deferred.js这个库就产生了 ...

  10. 教你如何塑造JavaScript牛逼形象

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...