jQuery实现灰蓝风格标准二级下拉菜单效果代码


Posted in Javascript onAugust 31, 2015

本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了。

运行效果截图如下:

jQuery实现灰蓝风格标准二级下拉菜单效果代码

在线演示地址如下:

具体代码如下:

<!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标准型二级菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body
{
 margin:0; padding:0; font-size:12px;
}
a:link {
 color:#1553a9; text-decoration: none;
}
a:visited {
 text-decoration:none; color: #1553a9;
}
a:hover {
 text-decoration:none; color: #f46662;
}
a:active {
 text-decoration: none; color:#f46662;
}
#main
{
 width:910px; margin:0 auto; 
}
#menu
{
 margin-top:20px; position:absolute;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a; background-color:#bcbcbc; border:#9a9b9b 1px solid; border-right:0; padding:10px; padding-top:13px; cursor:pointer;
}
.m1:hover
{
 background-color:#2c85e0; color:White;
}
.m2
{
  position:absolute; margin-top:39px; width:120px; background-color:#e4e4e4;border:#cdcece 1px solid;color:#666666; display:none;
}
.m2 table
{
 width:100%; line-height:35px;
}
.m2 table tr td
{
 text-align:center; border-top:#b4b4b4 1px dotted; cursor:pointer;
}
</style>
<script type="text/javascript">
$(function(){
$(".m1").mouseover(function(){
 $(this).parent().next(".m2").fadeIn();
}).mouseout(function(){
 $(this).parent().next(".m2").css("display","none");
});
$(".m2").mouseover(function(){
 $(this).css("display","block");
 $(this).prev().children().css("background-color","#2c85e0").css("color","White");;
}).mouseout(function(){
 $(this).css("display","none");
 $(this).prev().children().css("background-color","#bcbcbc").css("color","#3a3a3a");
});
});
</script>
</head>
<body>
<div id="main">
<div id="menu">
<a href="#" target="_blank"><span class="m1">论坛首页</span></a> 
<a href="#" target="_blank"><span class="m1">学生工作</span></a>
 <div class="m2" style="left:121px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">师资队伍</span></a>
 <div class="m2" style="left:242px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
 </table></div>
<a href="#" target="_blank"><span class="m1">学科专业</span></a>
 <div class="m2" style="left:363px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">本科专业</a></td></tr>
  <tr><td><a href="#" target="_blank">硕士专业</a></td></tr>
  <tr><td><a href="#" target="_blank">博士专业</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">教学改革</span></a>
 <div class="m2" style="left:484px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">教学体制</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">科研教学</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">党建工作</span></a>
 <div class="m2" style="left:605px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">学生党建</a></td></tr>
  <tr><td><a href="#" target="_blank">学院党建</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">联系我们</span></a> 
  <div class="m2" style="left:725px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">老师电话</a></td></tr>
  <tr><td><a href="#" target="_blank">领导传真</a></td></tr>
  <tr><td><a href="#" target="_blank">学校地址</a></td></tr>
  <tr><td><a href="#" target="_blank">卫星地图</a></td></tr>
 </table></div>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript的闭包
Dec 31 Javascript
JavaScript 的继承
Oct 01 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 #Javascript
Bootstrap的图片轮播示例代码
Aug 31 #Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 #Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 #Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
You might like
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python数据类型之Number数字操作实例详解
2019/05/08 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
研修第一天随笔感言
2014/02/15 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
欢迎领导标语
2014/06/27 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
警告通知
2015/04/25 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
深入理解redis中multi与pipeline
2021/06/02 Redis
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python