淘宝 京东等商城常用到的下拉菜单

HTML部分

<ul class="nav_right" id="nav">    <li><a href="#">我的金米仓<img src="images/arrow-1.png" style="width:10px;"></a>        <ul>            <li><a href="#">我的订单</a></li>            <li><a href="#">我的积分</a></li>            <li><a href="#">我的购物车</a></li>            <li><a href="#">产品一</a></li>            <li><a href="#">产品一</a></li>            <li><a href="#">产品一</a></li>        </ul>    </li>    <li><a href="#">收藏夹<img src="images/arrow-1.png" style="width:10px;"></a>        <ul>            <li><a href="#">商品收藏</a></li>            <li><a href="#">店铺收藏</a></li>        </ul>    </li>    <li><a href="#">客户服务<img src="images/arrow-1.png" style="width:10px;"></a>        <ul>            <li><a href="#">包裹跟踪</a></li>            <li><a href="#">常见问题</a></li>            <li><a href="#">在线退换货</a></li>            <li><a href="#">在线投诉</a></li>            <li><a href="#">在线答疑</a> </li>        </ul>    </li>    <li><a href="#">网站导航<img src="images/arrow-1.png" style="width:10px;"></a>        <ul>            <li style="border-bottom:1px #ccc solid;"><a href="#">金米仓商城</a></li>            <li style="border-bottom:1px #ccc solid;">                <a href="#">我们四</a>&nbsp;&nbsp;&nbsp;<a href="#">金米仓</a>&nbsp;&nbsp;&nbsp;<a href="#">金米仓</a>                <br>                <a href="">金米仓</a>            </li>            <li><a href="">网站联盟</a>&nbsp;&nbsp;&nbsp;<a href="">招商通道</a> </li>

        </ul>    </li>    <li><a href="#">关注我们:</a></li>    <li><img src="images/invite_weibo.png" style="width:20px;vertical-align: middle;">

    </li>    <li style="margin:0"><img src="images/invite_wx.png" style="width:20px;vertical-align: middle;">        <ul>            <li><img src="images/nihao.jpg" style="width:150px;position:relative;right:130px;"> </li>        </ul>    </li></ul>

CSS部分
#nav {

}#nav a {    display:  text-align:center;}#nav a:link {    color:#666; text-decoration:none;}#nav a:visited {    color:#666;text-decoration:none;}#nav a:hover {    text-decoration:none;}#nav li {    float: left; margin-right:15px;}#nav li:hover{}#nav li ul {    line-height: 27px; list-style-type: none;text-align:left;    left: -999em;  position: absolute;    background: #fff;}#nav li ul li{    float:inherit;padding-left:10px;}#nav li ul a{ text-align:left;}#nav li ul a:link {    text-decoration:none;}#nav li ul a:visited {   text-decoration:none;}#nav li ul a:hover {    color:#fa3b29;;text-decoration:none;font-weight:normal;}#nav li:hover ul {    left: auto;}#nav li.sfhover ul {    left: auto;}#content {    clear: left;}

JS部分
<script type=text/javascript>    <!--//--><![CDATA[//><!--    function menuFix() {        var sfEls = document.getElementById("nav").getElementsByTagName("li");        for (var i=0; i<sfEls.length; i++) {            sfEls[i].onmouseover=function() {                this.className+=(this.className.length>0? " ": "") + "sfhover";            }            sfEls[i].onMouseDown=function() {                this.className+=(this.className.length>0? " ": "") + "sfhover";            }            sfEls[i].onMouseUp=function() {                this.className+=(this.className.length>0? " ": "") + "sfhover";            }            sfEls[i].onmouseout=function() {                this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),                        "");            }        }    }    window.onload=menuFix;    //--><!]]></script>
 
 
时间: 2024-10-15 08:30:31

淘宝 京东等商城常用到的下拉菜单的相关文章

Testin云测:从双11看淘宝京东暗战移动电商

Testin云测:从双11看淘宝京东暗战移动电商 2014/11/11 · Testin · 独家评测 一年一度的双11今天凌晨开战,这也是阿里巴巴集团上市后的首个双11,去年单日成交额350亿元的成绩,其中突破1亿元用了55秒,今年3分钟即突破10亿,1小时已突破122亿元."双11"释放惊人的购买力. 值得注意的是,今年双11期间,用户在移动端访问双十一会场的流量几乎达到PC端的两倍,而在往年这一数字只占20%左右,移动时代的双十一终于来了. 多项迹象显示,移动电商已逐渐成为电子商

Java爬虫爬取 天猫 淘宝 京东 搜索页和 商品详情

Java爬虫爬取 天猫 淘宝 京东 搜索页和 商品详情 先识别商品url,区分平台提取商品编号,再根据平台带着商品编号爬取数据. 1.导包 <!-- 爬虫相关Jar包依赖 --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.10-FINAL</version> </

企业站常用的点击后弹出下拉菜单导航

<!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-Typ

JS基础12-DOM访问列表框、下拉菜单的常用属性

一.DOM访问列表框.下拉菜单的常用属性如下: form 返回列表框.下拉菜单所在的表单对象 length 返回列表框.下拉菜单的选项个数 options 返回列表框.下拉菜单里所有选项组成的数组 selectedIndex 返回下拉列表中选中选项的索引 type 返回下拉列表的类型,多选的话返回select-multiple,单选返回select-one 二.使用options[index]返回具体选项所对应的常用属性: defaultSelected 返回该选项默认是否被选中 index 返

DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

DOM访问HTML元素的方式 为了动态地修改HTML元素,须先访问HTML元素.DOM主要提供了两种方式来访问HTML元素: 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素. 利用节点关系访问HTML元素.常用的属性和方法如下: parentNode 返回当前节点的父节点 previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 childNodes 返回当前节点的

通过云服务器实现淘宝京东抢拍器

马上就要双十一了,想在淘宝上帮女朋友抢一些礼物,网上下载了几个抢拍器,普遍都有问题,最终还是决定自己制作一个抢拍器.由于秒杀也受到网络和系统环境的影响,这里打算使用高速稳定点的云主机来协助实现.在云主机的选择上,必须是能直接连接主干网络的云主机,否则网络延迟和在家里上网区别不大.(开始以为阿里云秒杀会更快,但实际测试结果并不是这样.挑了几次后还是使用了常用的易迈云.大家可以根据自己的喜好来挑选.)本文在后面会附带具体操作方法.一, 秒杀的设计要求:a. 高稳定性,高网速b. 高频度模拟用户操作c

淘宝京东 单品界面翻页效果

今天写一个类似京东 / 淘宝商品详情的界面 原理: 第一级是一个scrollView, 第二级,同级放两个UITableView或UIScrollView(根据需求,whatever啦..),这里,第一页我用了一个UITableView,第二页放了一个UIScrollView,在滑动第一页tableView到底部或点击下一页button的时候,有一个bounce上拉,切换到下一页的效果,切回去同理.      这里会有手势冲突,滑动第二级视图的时候,父视图就无法滑动了,其实解决的办法很简单啦,U

淘宝京东双十一撸一撸

淘宝和京东双十一全自动撸一撸脚本 作者:乐乐 一.淘宝自动养猫猫脚本 (一).所需工具 Auto.js安装包(下载链接:https://www.lanzous.com/i70nqwd).淘宝APP (二).使用步骤 1.安装软件,给予权限 安装Auto.js APP,并打开一次软件,提示需要获取无障碍权限,跟着给予它权限 2.导入脚本 (1)点击Auto.js软件右下角的+号,选择文件 (2)给文件随便取一个名字,比如我叫taobao (3)把下面的代码粘贴进去,右上角点击保存 alert('准

微信小程序怎么做淘宝客优惠券商城手把手教你完成从申请到上线

做淘宝客始终无法绕开微信,因为微信的用户基数大.粘度高.客户使用方便.想从微信的巨大流量池中获取客户就必须围绕微信做相关延伸产品的架设,如微信公众号.小程序.这些都是微信的核心产品.市场上不少淘客工具提供商都开发了微信公众号查券,小程序优惠券商城等等.今天我们主要讲怎么用微信小程序接入淘宝客领券的功能. 第一步:准备微信小程序账户大家可以自行百度微信小程序官网,咱们写文章是不方便直接放小程序官网链接的,这里主要讲注册小程序账号需要注意的一些事项,否则即使搭建好小程序也无法通过审核的. 1. 如果