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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery tab标签页的制作
May 10 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 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
简单易用的计数器(数据库)
2006/10/09 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Face++ API实现手势识别系统设计
2018/11/21 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
COSETTE官网:奢华,每天
2020/03/22 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
工伤调解协议书
2016/03/21 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
python 使用pandas读取csv文件的方法
2022/12/24 Python