仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery

本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中.

(1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口.

(2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把 <a> 元素设 display 属性设置成 inline-block .这在大多数浏览器中都有效. 针对IE7 可以加入下面一段条件注释来达到同样效果

复制代码 代码如下:

<!--[if IE 7]>
<style type="text/css">
#sidebar-menu div.menu-panel div.link-wrapper {
display : inline;
zoom : 1;
}
</style>
<![endif]-->

(3) 在途中看到前两个菜单有图标,实际上每个菜单都可以添加图标, 没个菜单有两个图标 , 一个是初始状态, 一个是鼠标滑过状态. 它们的命名规则是 , 如果初始状态是tubiao.jpg , 则鼠标滑过图标必须是 tubiao-hover.jpg. 图标的大小必须是 220px * 25px. 那如何指定每个菜单的图标呢? 可以在HTML里面指定. 比如在随后的代码中能看到.

复制代码 代码如下:

<div class="menu-item" style="background-image : url(images/tubiao.jpg);">
<span>图书音像</span>
</div>

这时初始状态的图片地址,鼠标滑过图片不用指定,但要和初始图片在同一目录下.
 
下面是完整的源代码文件 sidebar.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#sidebar-menu {
/*目前要求宽度是238px,高度是332px，左边框+width正好238，以后需要可以修改*/
border-left : 1px solid #F93;
width : 237px;
/* height : 332px; */
margin : 0;
padding : 0;
background : #FFF7F0;
}
#sidebar-menu > ul {
list-style : none;
padding : 0;
margin : 0;
}
#sidebar-menu > ul > li {
list-style : none;
padding : 0;
margin : 0;
border-bottom : 1px solid #FDEADB;
position : relative;
}
#sidebar-menu > ul > li.selected {
background : #FFF;
border-top : 1px solid #F93;
border-bottom : 1px solid #F93;
}
#sidebar-menu > ul > li.first {
border-top : 1px solid #F93;
}
#sidebar-menu > ul > li.last {
border-bottom : 1px solid #F93;
}

#sidebar-menu .menu-item {
background : #FFF7F0 no-repeat left center;
height : 32px; /**控制菜单中每行的宽度，下面还有两处需要修改**/
border-right : 1px solid #F93;
z-index : 10000;
position : relative;
}

#sidebar-menu > ul > li.selected .menu-item {
border-right : 1px solid #FFF;
background : #FFF no-repeat left center;
}
#sidebar-menu .menu-item span {
font-size : 13px;
font-weight : bold;
height : 32px;
line-height : 32px;
padding-left : 35px;
padding-top : 2px;
display : inline-block;
}

#sidebar-menu .menu-panel {
padding : 10px 20px;
display : none;
border : 1px solid #F93;
width : 560px;
position : absolute;
left : 236px;
top : -1px;
z-index : 5000;
min-height : 50px;
box-shadow: 1px 1px 4px #888888;
}

#sidebar-menu div.menu-panel.selected {
display : block;
}

/*Panel 里面的链接列表*/
#sidebar-menu div.menu-panel ul {
list-style : none;
padding : 0;
margin : 0;
}
#sidebar-menu div.menu-panel ul li {
list-style : none;
padding : 5px 0px;
margin : 0;
}

#sidebar-menu div.menu-panel>ul>li>h2 {
margin : 0;
padding : 0;
padding-top : 2px;
font-size : 13px;
color : red;
float : left;
width : 60px;
}
#sidebar-menu div.menu-panel>ul>li>div.link-list {
float : left;
padding-left : 10px;
width : 450px;
}
#sidebar-menu div.menu-panel div.link-wrapper {
display : inline-block;
padding : 3px 0px;
}
#sidebar-menu div.menu-panel div.link-wrapper span {
font-size : 13px;
color : #888;
padding-right : 4px;
}
#sidebar-menu div.menu-panel div.link-list a {
font-size : 13px;
color : #888;
text-decoration : none;
}
#sidebar-menu div.menu-panel div.link-list a:hover {
text-decoration : underline;
}
#sidebar-menu div.clear {
clear : both;
height : 0;
line-height : 0;
}
</style>
<script type="text/javascript">
$(function() {
$("#sidebar-menu > ul > li").hover(function() {
$(this).addClass("selected");
$(".menu-panel", this).addClass("selected");
var bgImg = $(".menu-item", this).css("background-image");
bgImg = bgImg.replace(".", "-hover.");
$(".menu-item", this).css("background-image", bgImg);
}, function() {
$(this).removeClass("selected");
$(".menu-panel", this).removeClass("selected");
var bgImg = $(".menu-item", this).css("background-image");
bgImg = bgImg.replace("-hover.", ".");
$(".menu-item", this).css("background-image", bgImg);
});
});
</script>
<!--[if IE 7]>
<style type="text/css">
#sidebar-menu div.menu-panel div.link-wrapper {
display : inline;
zoom : 1;
}
</style>
<![endif]-->
<title>Side bar demo</title>
</head>
<body>
<div id="sidebar-menu">
<ul>
<li class="first">
<div class="menu-item" style="background-image : url(images/tubiao.jpg);">
<span>图书音像</span>
</div>
<div class="menu-panel">
<ul>
<li>
<h2>高考图书</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href="#">物理习题</a></div>
<div class="link-wrapper"><span>|</span><a href="#">生物</a></div>
<div class="link-wrapper"><span>|</span><a href="#">高考复习题</a></div>
<div class="link-wrapper"><span>|</span><a href="#">语文作文大全</a></div>
<div class="link-wrapper"><span>|</span><a href="#">政治时事</a></div>
<div class="link-wrapper"><span>|</span><a href="#">历年高考真题解析与答案</a></div>
<div class="link-wrapper"><span>|</span><a href="#">考试题</a></div>
<div class="link-wrapper"><span>|</span><a href="#">化学实验测试</a></div>
<div class="link-wrapper"><span>|</span><a href="#">生物测试</a></div>
</div>
<div class="clear"></div>
</li>
<li>
<h2>专辑</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href="#">郑智化专辑</a></div>
<div class="link-wrapper"><span>|</span><a href="#">台湾伍佰</a></div>
<div class="link-wrapper"><span>|</span><a href="#">大陆张含韵</a></div>
<div class="link-wrapper"><span>|</span><a href="#">刘德华</a></div>
<div class="link-wrapper"><span>|</span><a href="#">成龙</a></div>
<div class="link-wrapper"><span>|</span><a href="#">王菲</a></div>
<div class="link-wrapper"><span>|</span><a href="#">最新歌曲排行榜</a></div>
</div>
<div class="clear"></div>
</li>
<li>
<h2>生活图书</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href="#">领悟人生</a></div>
<div class="link-wrapper"><span>|</span><a href="#">天文地理</a></div>
<div class="link-wrapper"><span>|</span><a href="#">旅游百科</a></div>
<div class="link-wrapper"><span>|</span><a href="#">炒菜一本通</a></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</li>
<li>
<div class="menu-item" style="background-image : url(images/tubiao.jpg);">
<span>生活类</span>
</div>
<div class="menu-panel">
<ul>
<li>
<h2>炒菜宝典</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href="#">领悟人生</a></div>
<div class="link-wrapper"><span>|</span><a href="#">天文地理</a></div>
<div class="link-wrapper"><span>|</span><a href="#">旅游百科</a></div>
<div class="link-wrapper"><span>|</span><a href="#">炒菜一本通</a></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li class="last">
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
</ul>
</div>
</body>
</html>

时间： 2024-11-08 21:57:05

仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery的相关文章

js仿淘宝的拼音检索特效代码_导航菜单

拼音检索: a Adidas AEE/爱意 AF AF棒球帽 Agatha Albion/奥尔滨 AMD Andox Artini 爱普生 b fasfs fsdfsd c[ch] fasfs fsdfsd fdsfas d fasfs fsdfsd fdsfas fasdffsd e fasfs fsdfsd fdsfas fasdffsd fasdfsaf f jb51.net 脚本 alixixi Fancl Fancl Fancl Fancl Fancl Fancl Fancl Fanc

谈谈为什么返还网能将淘宝网关键词优化上首页

2012年7月初,百度对淘宝客进行的又一轮封杀,从百度"淘宝网"搜索结果的变化中拉开帷幕.从我之前的一篇文章--<第三方导购平台面临困境 实施改变势在必行>以及之前A5的一ID"该用户特帅"写的几篇文章中,我们可以清楚的看到这搜索结果的有趣变化,从返还网在搜索结果中消失.后来返还网和返利网集体消失,再来后返还网的二级域名(http://taobao.fanhuan.com)出现在搜索结果第三的位置上,接着该搜索结果页面又设置了404错误页面,阻止来自百度

《淘宝网开店 进货 运营 管理 客服 实战200招》——1.3　常见网上开店平台

1.3 常见网上开店平台 淘宝网开店 进货 运营 管理 客服 实战200招网上开店需要一个好的平台,一般是通过大型网站注册会员进行售卖,创业者通过注册成为网站会员,然后依靠其网站开设店铺.在人气高的网站上注册建立网店是目前国内最火的开店方式,目前常见的网上开店四大平台分别是淘宝.易趣.拍拍网和百度有啊. 1．淘宝网淘宝网是亚太地区较大的网络零售商圈,由阿里巴巴集团在2003年5月10日投资创立.淘宝网现在业务跨越C2C(个人对个人).B2C(商家对个人)两大部分.截至2010年12月31日,淘宝

平安保险登陆淘宝网

[深圳商报讯](记者 胡佩霞)各保险公司销售保险不遗余力拓展渠道除自家网站可投保外陆续瞄准了国内著名购物网淘宝网.昨日记者获悉中国平安财产保险股份有限公司与淘宝网携手,正式开设中国平安淘宝官方旗舰店在线投保专区.客户可通过淘宝网直接购买中国平安的三款保险产品,投保.支付均可在线完成.而在平安之前泰康人寿.阳光财险.阳光寿险.华泰保险均已在淘宝开卖保险. 相较于普通的线下投保和电话投保模式,网上投保具有方便.灵活.高效等特点.随着中国网络消费体系的日趋成熟,消费者对于网络购买保险的认知程度也在不断

工商总局称淘标网商标遭淘宝网诉讼理由不成立

[硅谷网8月19日消息]淘味网.淘礼网.淘家网.淘枣网.淘菜网. 淘米网--淘宝网一炮而红后, 众多"淘某网"仿佛一夜之间冒了出来.淘宝网去年对公告要注册第42类商标的"淘标网" 提出异议, 认为淘标网涉嫌模仿淘宝网的商标.昨天记者获悉,淘标网负责人昨天收到http://www.aliyun.com/zixun/aggregation/30826.html">国家工商总局商标局的裁定,认为淘宝网提出的异议理由不成立,淘标网可以予以核准注册. 此前,淘

原生JS实现仿淘宝网左侧商品分类菜单效果代码_javascript技巧

本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码.分享给大家供大家参考.具体如下: 这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码,JavaScript技术实现,兼容各主流浏览器.自己再修改一下CSS菜单,它会变得更漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <head> <titl

淘宝网今年拟推C2B模式 个性购物将成主流

目前,国内电子商务市场主要以B2B(以阿里巴巴为代表).B2C(以当当网为代表).C2C(以淘宝为代表)3种模式为主,尝试C2B商业模式的企业并不多. 淘宝网等企业强调C2B模式也是首次.张宇认为,随着电子商务市场的发展,未来C2B模式将是市场趋势所在."目前消费者的消费需求其实还处于压抑状态,未来定制化和个性化购物将成为市场的主流."张宇还介绍,目前淘宝网已经出现了一批具备C2B雏形的网店和商品,比如个性化外观的山寨笔记本.可以定制外壳的手机等. 此前,阿里巴巴董事局主席马云也向媒体

jQuery仿淘宝网产品品牌隐藏与显示效果_jquery

本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

山东上半年淘宝网交易额超46亿网购渐入主流

8月20日,亚洲最大网络零售商圈淘宝网发布了今年上半年网络购物报告.报告显示,我省上半年在淘宝网交易额超过46 亿元,位居全国第五,全省拥有淘宝网注册会员1 千多万.业内人士称,随着越来越多的消费者习惯网上购物,电子商务将逐渐成为主流销售方式. 淘宝网业绩报告显示,上半年淘宝实现交易额 809 亿元,逼近去年全年 999.6亿的成交额,占全国社会消费品零售总额的 1.4% ,较去年年底上升了 0.4 个百分点,为拉动内需市场的增长贡献了15 个百分点. 淘宝网公众与客户沟通部总监卢维兴表示,目前