这是一款JS实现仿雅虎首页网站快捷入口导航模块的代码，里面有用户登录框，这个大家或许会用上吧，放到你网站着页作为用户登录也挺行。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!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=gb2312" /> <title>仿雅虎首页网站快捷入口和快</title> <style> *{ margin:0; padding:0; border:none;} body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif; height:100%;}li{list-style:none;} html{ height:100%;} .clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;} a:link{ color:#000; text-decoration:none; } a:visited{ color:#000; text-decoration:none; } a:hover{ color:#000; text-decoration:none; } .rrow{width:224px;} .login{ background:url(images/box.png); height:210px;width:224px; overflow:hidden;} .login h2{ color:#fff; font-size:14px; padding:4px 12px; line-height: 30px;height:24px; overflow:hidden; } .login h2 span{ font-size:12px; float:right;margin:-31px 23px 0 0;line-height: 32px;font-weight:400; cursor:pointer;} .rrow ul{ margin:5px 6px; } .rrow ul li {width:216px; height:31px;margin-bottom: 5px; overflow:hidden; float:left;} .rrow ul li a,.rrow ul li span{ cursor:pointer; display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -152px; width:69px;padding-left:35px; height:31px; overflow:hidden; line-height: 32px; font-weight:700;} .rrow ul li .lhover{ display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -183px; width:69px;padding-left:35px; height:37px; overflow:hidden; line-height: 32px; font-weight:700;} .rrow ul li .yhzc{ background:url(images/title.gif) 0 -152px;} #yhzc{background:url(images/title.gif) 0 -183px;height:37px;} .rrow ul li .hysj{ background:url(images/title.gif) -104px -152px; } #hysj{ background:url(images/title.gif) -104px -183px;height:37px;} .rrow ul li .fbxx{ background:url(images/title.gif) 0 -220px; } #fbxx{ background:url(images/title.gif) 0 -251px;height:37px;} .rrow ul li .gstg{ background:url(images/title.gif) -104px -220px; } #gstg{ background:url(images/title.gif) -104px -251px;height:37px;} .rrow ul li .xzmj{ background:url(images/title.gif) 0 -288px; } #xzmj{ background:url(images/title.gif) 0 -319px;height:37px;} .rrow ul li .bzzx{ background:url(images/title.gif) -104px -288px; } #bzzx{ background:url(images/title.gif) -104px -319px;height:37px;} .rrow ul .hoverli{background:url(images/title.gif) 0 -357px;height:92px; overflow:hidden; line-height: 32px; font-weight:700;} .qlogin{height:92px; width:210px; line-height: 32px; margin:5px 0 0 10px; display:none;} .qlogin dt{ height:0; overflow:hidden; } .qlogin dd{ padding:4px; width:210px; height:22px; text-align:left; float:left;clear:both;overflow:hidden;} .qlogin dd .passw,.qlogin a:hover.passw{ margin: -4px 12px 0 0; float:right;} .rrow ul li div{ margin-top: 5px; width:210px; display:none;} .rrow ul li div a,.rrow ul li div a:hover{background:url(images/title.gif) -80px -1px; height:20px; line-height: 20px; clear:both; font-weight: 400; width:170px;} .rrow ul li div a:hover{ text-decoration:underline; } .rrow ul li .block,.rrow .block{ display:block; } .rrow ul .none{ display:none; } .btn{font-size:12px; font-family:宋体; float:left; width:57px; height:20px; overflow:hidden; background:url(images/title.gif); line-height: 21px;padding-left:18px;margin-right: 10px; } a:hover.btn{background:url(images/title.gif) 0 -20px;} #btn4{background:url(images/title.gif);width:75px; margin-left: 48px; cursor:pointer;} .input2{font-size:12px; border:1px solid #999; width:140px; height:16px; padding:1px 2px 0 2px; } </style> </head> <body> <table cellpadding="0" cellspacing="0"> <tr> <td><div> <div> <h2>便捷入口<span><a title="快速登陆">快速登陆</a></span></h2> <dl> <dt>快速登陆</dt> <dd>用户名： <input type="text" /> </dd> <dd>密 码： <input type="password" /> </dd> <dd> <input type="submit" value="立即登陆" /> <a href="#" target="_blank">忘记密码？</a></dd> </dl> <ul> <li><span href="#" target="_blank" title="用户注册">用户注册</span><span href="#" target="_blank" title="会员升级">会员升级</span> <div><a href="#" target="_blank">1...</a><a href="#" target="_blank">1...</a></div> <div><a href="#" target="_blank">2...</a><a href="#" target="_blank">2...</a></div> </li> <li><span href="#" target="_blank" title="发布信息">发布信息</span><span href="#" target="_blank" title="公司推广">公司推广</span> <div><a href="#" target="_blank">3...</a><a href="#" target="_blank">3...</a></div> <div><a href="#" target="_blank">4...</a><a href="#" target="_blank">4...</a></div> </li> <li><span href="#" target="_blank" title="寻找买家">寻找买家</span><span href="#" target="_blank" title="帮助中心">帮助中心</span> <div><a href="#" target="_blank">5...</a><a href="#" target="_blank">5...</a></div> <div><a href="#" target="_blank">6...</a><a href="#" target="_blank">6...</a></div> </li> </ul> </div> <script type=text/javascript> var login = document.getElementById("login"); var yhzc = document.getElementById("yhzc"); var h2 = login.getElementsByTagName("h2"); var dl = login.getElementsByTagName("dl"); var ul = login.getElementsByTagName("ul"); var lis = ul[0].getElementsByTagName("li"); var allspan = ul[0].getElementsByTagName("span"); var qlog = h2[0].getElementsByTagName("a"); var divs = login.getElementsByTagName("div"); qlog[0].onclick = function() { for(var i = 0; i < divs.length; i++) {divs[i].className = null;} for(var i = 0; i < allspan.length; i++) {allspan[i].id = null;} lis[0].className = "none"; dl[0].className = "qlogin block"; } for(var x = 1; x < 4; x++) {show();} function show() { var test = "btype" +x; var btype = document.getElementById("btype" + x); var as = btype.getElementsByTagName("a"); var bdivs = btype.getElementsByTagName("div"); var spans = btype.getElementsByTagName("span"); for(var i = 0; i < spans.length; i++) { spans[i].num = i; spans[i].onmouseover = type; } function type() { for(var i = 0; i < lis.length; i++) {lis[i].className = null;} for(var i = 0; i < allspan.length; i++) {allspan[i].id = null;} for(var i = 0; i < divs.length; i++) {divs[i].className = null;} dl[0].className = "qlogin"; yhzc.id = null; spans[this.num].id = spans[this.num].className; bdivs[this.num].className = "block"; btype.className = "hoverli"; } } </script> </div> </td> </tr> </table> </body> </html>