JS仿淘宝网顶部的导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>JS仿淘宝网顶部的导航菜单_网页代码站(www.webdm.cn)</title><style type="text/css"> @charset "utf-8";/* CSS Document */body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}table{border-collapse:collapse;border-spacing:0;}p{line-height:24px}.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}#container{ width:1003px; text-align:left; margin:0 auto; }a{color:#333;text-decoration:none;}a:hover{color:#ef9b11; text-decoration:underline;}BODY {BACKGROUND:url(http://www.webdm.cn/images/20100919/mbg.png) no-repeat }BODY {BACKGROUND-POSITION: 0px -44px; BACKGROUND-REPEAT: repeat-x}#site-nav .quick-menu LI {BACKGROUND:url(http://www.webdm.cn/images/20100919/mbg.png) no-repeat}#site-nav .search .menu-hd S {BACKGROUND:url(http://www.webdm.cn/images/20100919/mbg.png) no-repeat}#site-nav .quick-menu .cart S {BACKGROUND:url(http://www.webdm.cn/images/20100919/mbg.png) no-repeat 999em 0px}#site-nav .search .menu-bd BUTTON {BACKGROUND:url(http://www.webdm.cn/images/20100919/mbg.png) no-repeat 999em 0px}#header {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}#page {MARGIN-LEFT: auto; WIDTH: 950px; MARGIN-RIGHT: auto}#site-nav-bg {Z-INDEX: 9999; BACKGROUND: #f7f7f7; LEFT: 0px; WIDTH: 100%; BORDER-BOTTOM: #d2d2d2 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 25px}#site-nav {Z-INDEX: 10000; MARGIN: 2px auto; COLOR: #000; LINE-HEIGHT: 19px; POSITION: relative; HEIGHT: 22px}#site-nav A {COLOR: #666}#site-nav A:hover {COLOR: #f50}#site-nav .login-info {FLOAT: left; PADDING-TOP: 1px}#site-nav .login-info A {MARGIN-RIGHT: 8px}#site-nav .login-info A.user-nick {MARGIN-RIGHT: 0px}#site-nav .quick-menu {RIGHT: 0px; POSITION: absolute; TOP: 0px}#site-nav .quick-menu LI {PADDING-RIGHT: 10px; BACKGROUND-POSITION: right 6px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: -1px; PADDING-TOP: 2px}#site-nav .quick-menu LI.last {BACKGROUND: none transparent scroll repeat 0% 0%}#site-nav .quick-menu LI.menu-item {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; POSITION: relative}#site-nav .quick-menu .cart {PADDING-TOP: 1px; POSITION: relative; _padding-top: 2px}#site-nav .quick-menu .cart A {PADDING-LEFT: 16px}#site-nav .quick-menu .cart S {BACKGROUND-POSITION: -83px -21px; LEFT: 8px; WIDTH: 14px; POSITION: absolute; TOP: 6px; HEIGHT: 11px}#site-nav .menu-hd {PADDING-RIGHT: 22px; DISPLAY: block; PADDING-LEFT: 10px; Z-INDEX: 10002; PADDING-BOTTOM: 0px; MARGIN: 1px 1px 0px; CURSOR: pointer; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 20px}#site-nav .mytaobao .menu-hd {WIDTH: 48px; PADDING-TOP: 1px; _padding-top: 1px}#site-nav .search .menu-hd {WIDTH: 24px; PADDING-TOP: 1px; _padding-top: 1px}#site-nav .services .menu-hd {WIDTH: 48px; PADDING-TOP: 1px; _padding-top: 1px}#site-nav .menu-hd B {BORDER-RIGHT: #eee 4px solid; BORDER-TOP: #666 4px solid; FONT-SIZE: 0px; RIGHT: 10px; BORDER-LEFT: #eee 4px solid; WIDTH: 0px; LINE-HEIGHT: 0; BORDER-BOTTOM: #eee 4px solid; POSITION: absolute; TOP: 7px; HEIGHT: 0px; -webkit-transition: -webkit-transform .2s ease-in; -moz-transition: -webkit-transform .2s ease-in; -o-transition: -webkit-transform .2s ease-in; transition: -webkit-transform .2s ease-in}#site-nav .search .menu-hd {PADDING-LEFT: 25px; COLOR: #666}#site-nav .search .menu-hd S {BACKGROUND-POSITION: -67px -20px; LEFT: 9px; WIDTH: 14px; POSITION: absolute; TOP: 4px; HEIGHT: 13px}#site-nav .menu-bd {BORDER-RIGHT: #bfbfbf 1px solid; BORDER-TOP: #bfbfbf 1px solid; DISPLAY: none; Z-INDEX: 10001; RIGHT: 0px; BACKGROUND: #fff; BORDER-LEFT: #bfbfbf 1px solid; BORDER-BOTTOM: #bfbfbf 1px solid; POSITION: absolute; TOP: 21px}#site-nav .search .menu-bd {_right: -1px}#site-nav IFRAME.menu-bd {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: -1; BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: alpha(opacity=0); FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}#site-nav .menu-bd-panel {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 6px; PADDING-TOP: 10px}#site-nav .menu-item-opp .menu-bd {LEFT: 0px}#site-nav .menu-item-opp .menu-bd S.rt {LEFT: 0px}#site-nav .menu-item-opp .menu-bd S.lt {BACKGROUND-POSITION: -87px -55px; RIGHT: -2px; LEFT: auto}#site-nav .menu {POSITION: relative}#site-nav .menu:hover .menu-hd {BORDER-RIGHT: #bfbfbf 1px solid; BORDER-TOP: #bfbfbf 1px solid; BACKGROUND: white; MARGIN: 0px; BORDER-LEFT: #bfbfbf 1px solid; BORDER-BOTTOM: #bfbfbf 1px}#site-nav .hover .menu-hd {BORDER-RIGHT: #bfbfbf 1px solid; BORDER-TOP: #bfbfbf 1px solid; BACKGROUND: white; MARGIN: 0px; BORDER-LEFT: #bfbfbf 1px solid; BORDER-BOTTOM: #bfbfbf 1px}#site-nav .menu:hover .menu-bd {DISPLAY: block}#site-nav .hover .menu-bd {DISPLAY: block}#site-nav .menu:hover .menu-hd B {BORDER-LEFT-COLOR: #fff; FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #666; TOP: 5px; BORDER-RIGHT-COLOR: #fff; -moz-transform: rotate(180deg); -moz-transform-origin: 50% 30%; -webkit-transform: rotate(180deg); -webkit-transform-origin: 50% 30%; -o-transform: rotate(180deg); -o-transform-origin: 50% 30%; transform: rotate(180deg); transform-origin: 50% 30%}#site-nav .hover .menu-hd B {BORDER-LEFT-COLOR: #fff; FILTER: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #666; TOP: 5px; BORDER-RIGHT-COLOR: #fff; -moz-transform: rotate(180deg); -moz-transform-origin: 50% 30%; -webkit-transform: rotate(180deg); -webkit-transform-origin: 50% 30%; -o-transform: rotate(180deg); -o-transform-origin: 50% 30%; transform: rotate(180deg); transform-origin: 50% 30%}#site-nav .mytaobao .menu-bd {WIDTH: 94px; LINE-HEIGHT: 1.7; TOP: 21px; HEIGHT: 57px}#site-nav .mytaobao .menu-bd-panel {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px}#site-nav .search .menu-bd {WIDTH: 204px; TOP: 21px; HEIGHT: 66px}#site-nav .search .menu-bd INPUT {BORDER-RIGHT: #b7b7b7 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #878787 1px solid; PADDING-LEFT: 1px; FLOAT: left; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #878787 1px solid; WIDTH: 180px; LINE-HEIGHT: 13px; PADDING-TOP: 3px; BORDER-BOTTOM: #b7b7b7 1px solid}#site-nav .search .menu-bd BUTTON {BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: 0px -20px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 66px; CURSOR: pointer; COLOR: #fff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px}#site-nav .services .menu-bd {WIDTH: 174px; TOP: 21px; HEIGHT: 218px}#site-nav .services .menu-bd-panel {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px}#site-nav .services .menu-bd DL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BORDER-BOTTOM: #e5e5e5 1px solid}#site-nav .services .menu-bd .last {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}#site-nav .services .menu-bd DT {FONT-WEIGHT: bold; COLOR: #8c8c8c; LINE-HEIGHT: 1.5; TEXT-ALIGN: left}#site-nav .services .menu-bd DD {LINE-HEIGHT: 1.6; TEXT-ALIGN: left}#site-nav .services .menu-bd DD A {MARGIN-RIGHT: 2px}</style></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> <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><p></p><p><p>整合了购物车，收藏夹，搜索，搜索，网站导航等功能的导航。</p></p><p></p></body></html><br>http://www.cnblogs.com/webdm/archive/2011/06/27/2091089.html
posted on 2013-03-04 00:04 biggest fish 阅读(368) 评论(0) 编辑 收藏 举报
