位置：首页>> 网络编程>> 网页设计>> 另外一种斜体的导航条

另外一种斜体的导航条

作者：快乐笛子　来源：快乐笛子的博客　发布时间：2008-11-05 12:24:00　

标签：导航,导航条,淘宝,倾斜

Sample:http://www.happyshow.org/sample/20060613/nav/nav.html

项目宽度随字数增多而自动变长.与"仿淘宝网站导航条"做法有些相似,主要难点是:当鼠标移动到一个项目上时,不仅需要改变当前项目的class,还需要控制下一个项目的class,这种做法用到的图片没有左右斜线之分.

----------------------------------以上代码写于6月13日----------------------------------

今天几乎重写了所有代码，除了鼠标在项目上移动时变化背景样式，而且还加上了二级菜单，并且兼容 Firefox，已经达到项目要求。

Sample:
http://www.happyshow.org/sample/20060615/index.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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link href="https://img.aspxhome.com/file/UploadPic/200811/5/main-67.css" rel="stylesheet" type="text/css"><link href="https://img.aspxhome.com/file/UploadPic/200811/5/class-49.css" rel="stylesheet" type="text/css"><script src="http://www.happyshow.org/sample/20060615/nav.js" type="text/javascript"></script><script type="text/javascript"> var selectindex = 0; //预设项目 var subclass = new Array() subclass[0] = "<ol><li>·电影</li><li>·餐厅</li><li>·演出</li></ol>"; subclass[1] = "<ol><li>·项链</li><li>·戒指</li><li>·耳环</li></ol>" subclass[2] = "<ol><li>·吃饭</li><li>·旅游</li></ol>" subclass[3] = "<ol><li>·万年历</li><li>·我的生日</li><li>·她的生日</li></ol>" subclass[4] = "<ol><li>·金牛座</li><li>·射手座</li><li>·蝎子座</li><li>·水瓶座</li></ol>"</script></head><body onload="preset()"><div id="con"> <div id="head" onmouseover="recover()"><label for="username">用户名：</label><input name="username" type="text" class="inputbox1" id="username" /> <label for="userpass">密码：</label><input name="userpass" type="text" class="inputbox1" id="userpass" /> <input type="checkbox" name="autologin" id="autologin"><label for="autologin">自动登录</label> <input type="button" value="登录"><input type="button" value="注册"> <img src="https://img.aspxhome.com/file/UploadPic/200811/5/lady-66.gif" width="91" height="25" style="margin-bottom:-6px;" /></div> <div id="logo"> <img src="https://img.aspxhome.com/file/UploadPic/200811/5/logo1-94.gif" width="94" height="75" border="0" align="bottom" /> <img src="https://img.aspxhome.com/file/UploadPic/200811/5/logo2-48.gif" width="108" height="63" border="0" align="bottom" style="margin-top:12px;"/> <div id="search"> <input name="userpass2" type="text" class="inputbox1" id="userpass2" /><img src="https://img.aspxhome.com/file/UploadPic/200811/5/searchbutton-38.gif" width="31" height="18" /></div> <div id="nav" > <ul id="itemlist" onmouseout="recover()"> <li><a href="http://www.happyshow.org/sample/20060615/index.html"><span onmouseover="focusthis(this)" class="style0">约会安排</span></a></li> <li><a href="http://www.happyshow.org/sample/20060615/index2.html"><span onmouseover="focusthis(this)" class="style0">礼物安排</span></a></li> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">话题安排</span></a></li> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">日历</span></a></li> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">测试星座</span></a></li> <li><a href="#"><span style="width:15px;padding:0px" class="style0"> </span></a></li> </ul> </div></div> <div id="subclass"> </div> <div id="content" onmouseover="recover()"> 我的博客：<br /> <a href="http://www.happyshow.org" target="_blank">http://www.happyshow.org</a><br> <br /> <br /> <br /> 导航条的三种状态：<br /><br /> <h5 class="style0">style0</h5> <h5 class="style1">style1</h5> <h5 class="style2">style2</h5> </div></div></body></html>

在代码编写过程中，发现 Firefox 对 DOM 解释和 IE 对 DOM 的解释差别较大。虽然上面的代码也兼容ff，但实现的方法不太标准，近期需要补习一下 FF 下的 DOM。

目前此效果仅能应用于网站导航条，对于选项卡效果，还需要调整一下代码，但估计不用重写了，呵呵～

----------------------------------以上代码写于6月15日----------------------------------

2 下一页

投稿

另外一种斜体的导航条

猜你喜欢