jQuery implements gray-blue style standard secondary drop-down menu effect code

jQuery implements gray-blue style standard secondary drop-down menu effect code_jquery

WBOY

Release： 2016-05-16 15:41:21

Original

1232 people have browsed it

The example in this article describes the jQuery implementation of the gray-blue style standard secondary drop-down menu effect code. Share it with everyone for your reference. The details are as follows:

This is a standard secondary menu based on jQuery. It is a beautiful gray-blue style drop-down cascading menu. The code has been perfectly corrected. The compatibility is now very good. You don’t even need to modify it. Just copy the code. It's ready to use.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/

The specific code is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.