html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果

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

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

运行效果截图如下:

6af7413ba534a01d170d242023167b97.png

在线演示地址如下:

具体代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS jQuery HTML二级下滑菜单

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}

$(document).ready(function() {

$(".menu li").hover(function() {

$(this).find(".menuUl").show('50');

},

function() {

$(this).find(".menuUl").hide('50');

});

})

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

parentElement,srcElement 使用

代码 <!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-T…

哈哈哈,程序员没有女朋友的原因,我终于找到了!

全世界只有3.14 % 的人关注了爆炸吧知识程序员没有女朋友的原因▼程序员大脑里想的▼每天要学习太多语言&#xff0c;程序员太忙了▼女朋友 VS 编译器▼程序员sao起来&#xff0c;还需要女朋友吗&#xff1f;▼电脑才是程序员的女朋友▼互道晚安后&#xff0c;会不会偶遇在同一…

基于事件驱动架构构建微服务第7部分:在仓储上实现事件溯源

原文链接&#xff1a;https://logcorner.com/building-microservices-through-event-driven-architecture-part7-implementing-eventsourcing-on-repositories/在本文中&#xff0c;我将讨论Repository上的Event Sourcing实现。仓储负责将事件添加到事件存储并从事件存储中检索…

python选择题题目_Python接口测试题(持续更新中)

1、json和字典的区别&#xff1f; Json是轻量级的数据交互格式&#xff0c;以key-value的键值对形式来保存数据&#xff0c;结构清晰&#xff0c;可以说是目前互联网项目开发中最常用的一种数据交互格式。 字典&#xff0c;同样是以key-value的键值对来保存数据&#xff0c;是p…

javascript事件之:jQuery事件中实例对象和拓展对象之间的通信

我们总结过jQery事件中的实例原型对象对外接口和拓展对象&#xff0c;现在我们看看他们是如何进行通信联系的。 先来看便捷方法&#xff1a; 1 //调用的还是实例对象下的on()和trigger()2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click db…

SQL 中的unicode字符

要将字符转换成unicode字符以显示某些符号&#xff0c;可以在字符串前加N,如&#xff1a; select N♧♡♂♀♠♣♥❤☜☞☎☏ 转载于:https://www.cnblogs.com/Laro/archive/2011/03/07/1976483.html

html5 ajax数据显示,html5的ajax学习(二)

一、基础知识点1.ajax可以做事情&#xff1a;局部刷新 浏览器搜索列表记录 加载更多的数据2.登录页面同步网络请求&#xff1a;页面全部刷新&#xff0c;用户量大体验很不好3.ajax的详解&#xff1a;ajax的get和post请求 同步还是异步&#xff0c;true为异步ajax.open("ge…

后羿采集器怎么导出数据_后羿SEO:如何用后羿采集器查收录?(附详细步骤图)...

摘要&#xff1a;不知道大家查收录是用啥查的&#xff0c;或许市面上有工具&#xff0c;可以批量查&#xff0c;但是这些工具不是收费就是查询结果不太准确。今天狠人SEO教大家一个查询结果比较准确的方法。如标题写的&#xff0c;...不知道大家查收录是用啥查的&#xff0c;或…

ISA Server服务器故障恢复一例系统盘符更换之后的应对方法

周四下午的时候&#xff0c;某政府信息中心领导打电话告诉我&#xff0c;ISA Server服务器不能开机了。随后公司的技术员到达现场&#xff0c;经过检查&#xff0c;发现服务器显卡损坏。在更换显卡后&#xff0c;服务器可以开机&#xff0c;但却不能进入系统—-服务器在经过BIO…

有梦想就有前进的动力

有梦想就有前进的动力&#xff0c;我为自己代言转载于:https://blog.51cto.com/9730193/1589340

扩展Windows Mobile模拟器存储空间的方法

在Windows Mobile应用程序开发的初期&#xff0c;可以使用SDK自带的模拟器来进行调试&#xff0c;这给我们开发人员提供了一种方便的途径。一般的应用程序&#xff0c;占用空间的大小也就几 百K&#xff0c;或者几M&#xff0c;这在模拟器上调试起来一点问题也没有。但是有的时…

UOS LoongArch 上成功安装.NET Core 3.1

龙芯.NET团队正式发布了.NET Core 3.1 For LoongArch, 具体参见龙芯开源网站 http://www.loongnix.cn/index.php/Dotnet 。进入安装包下载地址LoongArch64-.NET Core 3.1&#xff0c;可以看到龙芯.NET团队做了很多工作&#xff0c;为Debian和Redhat两大Linux体系平台都做好了基…

c++ vector拷贝构造_JDK源码分析-Vector

1. 概述上文「JDK源码分析-ArrayList」主要分析了 ArrayList 的实现原理。本文分析 List 接口的另一个实现类&#xff1a;Vector。Vector 的内部实现与 ArrayList 类似&#xff0c;也可以理解为一个「可变数组」。其继承结构如下&#xff08;省略部分接口&#xff09;&#xff…

除了PS,原来这个也可以轻松实现图像处理!

全世界只有3.14 % 的人关注了爆炸吧知识在我们生活中&#xff0c;常见的图像处理软件有Adobe Photoshop、Adobe Illustrator等。然而&#xff0c;并非只有软件才能实现图像处理&#xff0c;通过编程手段也是能实现的&#xff01;今天&#xff0c;小天将要带着大家走进计算机视觉…

HTML5视频和音频常见的格式,HTML5 音频和视频

HTML5 特性&#xff0c;包括原生音频和视频支持而无需 Flash。HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源&#xff0c;包含 controls 属性让用户可以播放和暂停媒体。嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式&#xff1a…

北斗三号b1c频点带宽_【导航论坛】北斗三号卫星导航信号及接收策略

原标题&#xff1a;【导航论坛】北斗三号卫星导航信号及接收策略编者按以“5G/GNSS高精度定位与空间数据深度应用”为主题的高峰论坛上&#xff0c;来自清华大学的陆明泉教授为与会代表带来了题为《北斗三号卫星导航信号及接收策略》的主题报告。陆教授首先对报告的题目作了一个…

下雨天纵使少了什么也是少不了一把伞的&#xff0c;即使是几千年前&#xff0c;也不管细雨霏霏&#xff0c;大雨倾盆。愿意沐浴风雨中&#xff0c;享受这样惠泽的人总是少的。从“孤舟蓑笠翁&#xff0c;独钓寒江雪”&#xff0c;“十里一长亭&#xff0c;五里一短亭”&#xf…

oracle用户名密码过期引起的网站后台无法登录

本来今天休息&#xff0c;但是接到同事反映&#xff1a;客户的WEB无法登录了&#xff0c;网站能打开&#xff0c;但是后台登录不了。我就联系了客户&#xff0c;客户说是WEB用户的密码过期导致的&#xff0c;默认是180天到期。接着就是我的操作流程了&#xff1a;1.先从WEB服务…

微服务的终极目标,Mecha分布式运行时之Dapr

1. Mecha 是啥&#xff1f;微服务发展到今天&#xff0c;已经有很多公司多年前已经改造完毕&#xff0c;也有些公司还在路上&#xff0c;微服务的优势&#xff0c;有过了解的朋友应该也都能说出个一二三来&#xff0c;经历过微服务改造的&#xff0c;应该都知道其中的艰辛。单体…

java mina unix client

/Files/nanshouyong326/MinaTest.rar转载于:https://www.cnblogs.com/nanshouyong326/archive/2011/03/15/1985130.html