Heim > Artikel > Web-Frontend > jQuery implementiert den standardmäßigen sekundären Dropdown-Menüeffekt code_jquery im grau-blauen Stil
Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des standardmäßigen sekundären Dropdown-Menüeffektcodes im grau-blauen Stil. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein Standard-Sekundärmenü, das auf jQuery basiert. Es ist ein wunderschönes Dropdown-Menü im grau-blauen Stil. Die Kompatibilität ist jetzt nicht einmal sehr gut . Kopieren Sie einfach den Code.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/
Der spezifische Code lautet wie folgt:
<!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>
Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.