仿淘宝网的漂亮导航菜单代码
代码简介:
仿淘宝网站的漂亮导航菜单,暖色调风格,响应鼠标悬停动作,结构清淅,不过用到了一些修饰图片,你可以顺着源代码找到这些图片地址,然后下载下来,这款菜单其实很不错哦。
代码内容:
<!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>仿淘宝网的漂亮导航菜单代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> #nav{ background-image:url(http://www.webdm.cn/images/20090919/navM.gif); } #nav div{ background-image:url(http://www.webdm.cn/images/20090919/nav_S.gif); float:left; width:4px; height:34px; font-size:0px; margin:0px 4px; background-repeat:no-repeat; background-position:top; background-repeat:no-repeat; } a.nav{ display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer; } a.nav span{ display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px; } a.nav:hover{ display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url (http://www.webdm.cn/images/20090919/nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none; } a.nav:hover span{ display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url (http://www.webdm.cn/images/20090919/nav_Over_R.gif); background-position:right center; background-repeat:no-repeat; } #curTab{ display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url (http://www.webdm.cn/images/20090919/nav_On_L.gif); background-position:left center; background-repeat:no-repeat; } #curTab span{ display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url (http://www.webdm.cn/images/20090919/nav_On_R.gif);background-position:right center; background-repeat:no-repeat; } </style> <script language="javascript"> function $(objId){ return document.getElementById(objId); } function changeId(idName,obj){ $(idName).id=""; obj.id=idName; obj.blur(); } </script> </head> <body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3"><img src="http://www.webdm.cn/images/20090919/navL.gif" width="3" height="34"></td> <td id="nav"> <table width="960" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <a href="#" id="curTab" class="nav" onclick="changeId('curTab',this)"><span>网页代码站</span></a> <div></div> <a href="#" class="nav" onclick="changeId('curTab',this)"><span>最新更新</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>下载排行</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>源码分类</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>网页特效</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>ASP源码</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>PHP源码</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>.NET源码</span></a> <div></div> <a href="/" class="nav" onclick="changeId('curTab',this)"><span>JAVA源码</span></a> </td> </tr> </table> </td> <td width="3"><img src="http://www.webdm.cn/images/20090919/navR.gif" width="3" height="34"></td> </tr> </table> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/a2ea0eae-6693-40f0-90c3-fea3b77e2694.html