PHP速学视频免费教程(入门到精通)
PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
本文实例讲述了jquery实现灰蓝风格标准二级下拉菜单效果代码。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/
具体代码如下:
<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><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>
希望本文所述对大家的jquery程序设计有所帮助。
已抢5718个
抢已抢80078个
抢已抢13217个
抢已抢47027个
抢已抢179198个
抢已抢83212个
抢