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 相关文章推荐
DOM精简教程
Oct 03 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
javascript中var的重要性分析
Feb 11 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vuex与组件联合使用的方法
2018/05/10 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
质量工程师岗位职责
2013/11/16 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
我的梦想演讲稿
2014/04/30 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
出国签证在职证明范本
2014/11/24 职场文书
见义勇为事迹材料
2014/12/24 职场文书
八达岭长城导游词
2015/01/30 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
python基础之爬虫入门
2021/05/10 Python
Python中的程序流程控制语句
2022/02/24 Python