jQuery+CSS打造的弹出层菜单
<!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> <title>jQuery+CSS打造的弹出层菜单</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style> body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} .UpLayer{ margin:100px;} .UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} .UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} .UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} .UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;} </style> <script type="text/javascript"> $(document).ready(function(){ var objStr = ".UpLayer"; $(objStr).each(function(i){ $(this).click(function(){ $($(objStr+" dd")[i]).show(); $($(objStr+" dt")[i]).addClass("UpLayer02"); }); $(this).hover(function(){},function(){ $($(objStr+" dd")[i]).hide(); $($(objStr+" dt")[i]).removeClass("UpLayer02"); }); }); }); </script> </head> <body> <!-- 【经典】弹出层菜单 --> <div class="UpLayer"> <dl> <dt><a href="javascript:void(0)">弹出层</a></dt> <dd> <a href="#">手机资讯</a> <a href="#">热门文章</a> <a href="#">联系站长</a> <a href="#">时光勿勿</a> </dd> </dl> </div><br><br> 提示:如果网页有出错提示,请刷新页面再试。 <br /> <p><a href="http://www.iiwnet.com">爱微网</a> - - 致力为中国站长提供有质量的网页代码!</p> </body> </html><!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> <title>jQuery+CSS打造的弹出层菜单</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style> body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} .UpLayer{ margin:100px;} .UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} .UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} .UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} .UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;} </style> <script type="text/javascript"> $(document).ready(function(){ var objStr = ".UpLayer"; $(objStr).each(function(i){ $(this).click(function(){ $($(objStr+" dd")[i]).show(); $($(objStr+" dt")[i]).addClass("UpLayer02"); }); $(this).hover(function(){},function(){ $($(objStr+" dd")[i]).hide(); $($(objStr+" dt")[i]).removeClass("UpLayer02"); }); }); }); </script> </head> <body> <!-- 【经典】弹出层菜单 --> <div class="UpLayer"> <dl> <dt><a href="javascript:void(0)">弹出层</a></dt> <dd> <a href="#">手机资讯</a> <a href="#">热门文章</a> <a href="#">联系站长</a> <a href="#">时光勿勿</a> </dd> </dl> </div><br><br> 提示:如果网页有出错提示,请刷新页面再试。 <br /> <p><a href="http://www.iiwnet.com">爱微网</a> - - 致力为中国站长提供有质量的网页代码!</p> </body> </html>