代码简介:

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>
<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>
<SCRIPT src="http://www.webdm.cn/images/20100919/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>  <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>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/5811cc38-b694-4140-9fd1-ca15dca6d031.html

转载于:https://www.cnblogs.com/webdm/archive/2011/06/27/2091089.html

JS仿淘宝网顶部的导航菜单相关推荐

  1. 淘宝网顶部导航菜单效果

    演示:http://www.websjy.com/club/websjy_index/29/ 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. 仿淘宝网首页导航条效果

    < html > < head > < meta http - equiv = " Content-Type "  content = " ...

  3. js仿淘宝主图放大镜功能

    js仿淘宝主图放大镜功能 演示地址 下载地址

  4. 安卓项目实践——仿淘宝界面(二)——底部导航栏技术(Fragment实现)

    安卓项目实践--仿淘宝界面(一)--底部导航栏技术(Fragment实现) 1.实现效果展示 2.技术简述 该导航栏主要使用Fragment技术实现,关于Fragment的介绍大家可以自行百度,导航栏 ...

  5. 【每日一练】原生js仿淘宝主图放大镜功能,附学习源码

    在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...

  6. 仿淘宝网站的TabPage导航效果

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. 2022仿淘宝网首页html+css

    效果图如下: 所有文件已经打包好了,上链接: 蓝奏云: 仿淘宝网站首页.zip - 蓝奏云 百度网盘: https://pan.baidu.com/s/1DsloErpJFQ_stwLQYb8dYw? ...

  8. JS 仿淘宝幻灯片 非完整版 小案例

    仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 ...

  9. 仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性

    1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制. 默认情况下,clipChild被设置为true. 也就是不允许进行 ...

最新文章

  1. 从Netflix的Hystrix框架理解服务熔断和服务降级
  2. RNN-LSTM循环神经网络-03Tensorflow进阶实现
  3. hdu 6200 mustedge mustedge mustedge(dfs序+树状数组+并查集)
  4. python中遍历字典判断是否存在_python中如何判断值在不在字典中
  5. DotNET内存管理与垃圾回收[转]
  6. 在5个数中找最大的数,并把他放入MAX单元
  7. [面试]如何写testcase?
  8. 简单的python案例_实现的简单python例子
  9. 【tf.keras】tf.keras模型复现
  10. Struts2(Maven),小白版
  11. YOLOX安装及训练
  12. django前戏准备
  13. CentOS 8 部署禅道,并使用自己的数据库
  14. 微信为什么要绑定银行卡?
  15. spring boot 报错:extShutdownHook ...was destroying!
  16. 【opencv-python不规则多边形 ROI提取】
  17. ESP8266 MP3制作——esp8266联网
  18. 治五气,艺五种,抚万民,度四方
  19. 单目标跟踪算法调研(2020)
  20. viper4android 安装失败,一步一步教你如何使4.42版本ROOT并且安装Viper4Android音效软件...

热门文章

  1. android okhttputils传数组,okhttp传递数组参数
  2. 英魂之刃服务器维护中修改,英魂之刃gg修改教程 | 手游网游页游攻略大全
  3. 嵌入式操作系统_一个C++版的嵌入式操作系统
  4. 徐州哪个技校学计算机,徐州技校,徐州技术学校哪个好,徐州技术学校哪个知名度高一点 - IT教育频道...
  5. android 加载系统私有库,Android 搭建私有maven仓库及上传项目
  6. java获取年份getyear_Java LocalDateTime getYear()用法及代码示例
  7. C# ini文件的读写
  8. BZOJ3252攻略——长链剖分+贪心
  9. 使用file_get_contents下载图片
  10. Shell编程-JAVA大数据-Week5-DAY3-linux