jQuery+CSS实现的网页二级下滑菜单效果


Posted in Javascript onAugust 25, 2015

本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果。分享给大家供大家参考。具体如下:

这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了,在IE下表现不错,在火狐下发现菜单有闪烁现象,有空会继续修正,感谢大家捧场哦。

运行效果截图如下:

jQuery+CSS实现的网页二级下滑菜单效果

在线演示地址如下:

具体代码如下:

<!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>
<title>CSS jQuery HTML二级下滑菜单</title>
<style type="text/css">
body,ul,li,a{margin: 0;padding: 0;font:16px "微软雅黑";}
ul,li{list-style-type: none}
.menu{width: 270px;height: 30px;line-height: 30px;background: #0f67a1}
.menu li{width: 120px;float: left;display: inline;position: relative;z-index: 10;text-align: center;}
.menu li: hover{background: #426d9c;}
.menu .menuUl{width: 120px;height: auto;display: none;background: #426d9c;position: absolute;z-index: 20;left: 25px;top: 30px;padding:3px;}
.menuUl li{width: 100%;float: left;text-align: left;}
a{color: #eee;text-decoration: none}
a: hover{color: #000;text-decoration: none}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">  
$(document).ready(function() {
 $(".menu li").hover(function() {
 $(this).find(".menuUl").show('50');
 },
 function() {
 $(this).find(".menuUl").hide('50');
 });
})   
</script>
</head>
<body>
<ul class="menu">
<li><a href="">源码类</a>
 <ul class="menuUl">
  <li><a href="#" >论坛源码</a></li>
  <li><a href="#" >博客源码</a></li>
  <li><a href="#" >Ajax源码</a></li>
 </ul>
</li>
<li><a href="">特效类</a>
 <ul class="menuUl">
  <li><a href="#" >导航菜单</a></li>
  <li><a href="#" >表单效果</a></li>
  <li><a href="#" >HTML5特效</a></li>
  <li><a href="#" >jQuery特效</a></li>
 </ul>
</li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
小程序转发探索示例
Feb 19 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 #Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 #Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 #Javascript
基于jQuery实现在线选座之高铁版
Aug 24 #Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
You might like
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
javascript中的隐式调用
2018/02/10 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python获取本机外网ip的方法
2015/04/15 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python随机生成库faker库api实例详解
2019/11/28 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
python上selenium的弹框操作实现
2020/07/13 Python
欢送会主持词
2015/07/01 职场文书
小学运动会加油词
2015/07/18 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android