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 相关文章推荐
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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
php中数据的批量导入(csv文件)
2006/10/09 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
移动节点的jquery代码
2014/01/13 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js格式化时间的方法
2015/12/18 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
详解Python字符串对象的实现
2015/12/24 Python
Python logging模块用法示例
2018/08/28 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python如何实现爬取B站视频
2020/05/20 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python如何读取、写入JSON数据
2020/07/28 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
创建市级文明单位实施方案
2014/03/01 职场文书
培训班通知
2015/04/25 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS