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 27 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
理解javascript async的用法
Aug 22 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
vue项目实现图片上传功能
Dec 23 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
PHP读取Excel类文件
2017/05/15 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python 多个参数不为空校验方法
2019/02/14 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
销售顾问的岗位职责
2013/11/13 职场文书
入党自我评价优缺点
2014/01/25 职场文书
人事科岗位职责范本
2014/03/02 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
javaScript Array api梳理
2021/03/31 Javascript
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
mysql数据库入门第一步之创建表
2021/05/14 MySQL
python中Matplotlib绘制直线的实例代码
2021/07/04 Python