淘宝网顶部导航菜单效果

 

演示：http://www.websjy.com/club/websjy_index/29/

 

 

代码

<! 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" />
< meta name ="keywords" content ="JS代码,菜单导航,JS广告代码,JS特效代码" />
< title > 淘宝网顶部导航菜单_懒人图库 </ title >
< LINK href ="http://www.websjy.com/club/websjy_index/29/css/css.css" rel =stylesheet >
< SCRIPT src ="http://www.websjy.com/club/websjy_index/29/js/taobao.js" ></ SCRIPT >
</ head >

< body style ="text-align:center" >

< div id =page >
< div class ="chl-poster simple" id =header >
< div id =site-nav >
< UL class =quick-menu >
< LI class =home >< A href ="#" > 淘宝网首页 </ A > </ LI >
< LI >< A href ="#" > 我要买 </ A ></ LI >
< LI class ="mytaobao menu-item" >
< div class =menu >
< A class =menu-hd href ="#" target =_top rel =nofollow > 我的淘宝 < B ></ B ></ A >
< div class =menu-bd >
< div class =menu-bd-panel >
< div >
< A href ="#" rel =nofollow > 已买到的宝贝 </ A >
< A href ="#" rel =nofollow > 已卖出的宝贝 </ A >
</ div >
</ div >
< S class =r ></ S >< S class =rt ></ S >< S class =lt ></ S >< S class =b ></ S >< S class ="b b2" ></ S >< S class =rb ></ S >< S class =lb ></ S >
</ div >
</ div >
</ LI >
< LI class =cart >< A href ="#" rel =nofollow >< S ></ S > 购物车 </ A ></ LI >
< LI class =favorite >< A href ="#" rel =nofollow > 收藏夹 </ A ></ LI >
< LI class ="search menu-item" >
< div class =menu >< SPAN class =menu-hd >< S ></ S > 搜索 < B ></ B ></ SPAN >
< div class =menu-bd >
< div class =menu-bd-panel >
< FORM name =topSearch action =http://s.taobao.com/search?ssid=s0 >< INPUT
maxLength =60 name =q >< BUTTON type =submit > 搜 索 </ BUTTON > < INPUT type =hidden
value =newsearch name =shopf > </ FORM >
</ div >
< S class =r ></ S >< S class =rt ></ S >< S class =lt ></ S >< S class =b ></ S >< S class ="b b2" ></ S >< S class =rb ></ S >< S class =lb ></ S >
</ div >
</ div >
</ LI >
< LI class ="services menu-item last" >
< div class =menu >
< A class =menu-hd href ="#" target =_top > 网站导航 < B ></ B ></ A >
< div class =menu-bd style ="WIDTH: 210px; HEIGHT: 262px; _width: 202px" >
< div class =menu-bd-panel >
< DL >
< DT >< A href ="#" > 购物 </ A >
< DD >
< A href ="#" > 商城 </ A >
< A href ="#" > 电器城 </ A >
< A href ="#" > 嗨淘 </ A >
< A href ="#" > 全球购 </ A >
< A href ="#" > 跳蚤街 </ A >
< A href ="#" > 礼物 </ A >
< A href ="#" > 促销 </ A >
< A href ="#" > 机票 </ A >
< A href ="#" > 彩票 </ A >
< A href ="#" > 创意 </ A >
</ DD >
</ DL >
< DL >
< DT >< A href ="#" > 门户 </ A >
< DD >< A href ="#" > 服饰 </ A > < A href ="#" > 女人 </ A > < A href ="#" > 美容 </ A > < A href ="#" > 居家 </ A > < A href ="#" > 男人 </ A > < A href ="#" > 数码 </ A > < A href ="#" > 亲子 </ A > < A href ="#" > 时尚 </ A > < A href ="#" > 试用 </ A > < A href ="#" > 心得 </ A > < A href ="#" > 帮派 </ A > < A href ="#" > 画报 </ A > < A href ="#" > 淘女郎 </ A > < A href ="#" > 社区 </ A > < A href ="#" > 宝贝传奇 </ A >
</ DD >
</ DL >
< DL >
< DT >< A href ="#" > 淘江湖 </ A > &nbsp; < A href ="#" > 手机淘宝 </ A > </ DT ></ DL >
< DL >
< DT >< A href ="#" > 帮助中心 </ A >
< DD >< A href ="#" > 交易安全 </ A > < A href ="#" > 维权中心 </ A > </ DD ></ DL >
< DL class =last >
< DD >< STRONG style ="FONT-WEIGHT: bold" >< A href ="#" > 更多内容 </ A ></ STRONG ></ DD >
</ DL >
</ div >
< S class =r ></ S >< S class =rt ></ S >< S class =lt ></ S >< S class =b style ="WIDTH: 169px" ></ S >< S class ="b b2" style ="WIDTH: 169px" ></ S >< S class =rb ></ S >< S class =lb ></ S >
</ div >
</ div >
</ LI >
</ UL >
</ div >
</ div >
</ div >
< SCRIPT type =text/javascript >
TB.Header.init();
</ SCRIPT >
</ body >
</ html >

 

 

 

 

转载于:https://www.cnblogs.com/websjy/archive/2010/08/23/1806156.html