首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 25, 2013

本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery代码优化 遍历篇
Nov 01 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
js实现文字滚动效果
Mar 03 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
简单常用的幻灯片播放实现代码
Sep 25 #Javascript
javascript date格式化示例
Sep 25 #Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 #Javascript
js中的this关键字详解
Sep 25 #Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 #Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 #Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 #Javascript
单向链表(1) NumPy(2) router(1) 路由(1) 抽象类(1) Date(1) 模拟登录(1) Scheduled(1) 扫雷(1) 接口(1)
You might like
php自动获取关键字的方法
2015/01/06 PHP
jQuery find和children方法使用
2011/01/31 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
奥地利网上书店：Weltbild
2017/07/14 全球购物
SportsDirect.com新加坡：英国第一体育零售商
2019/03/30 全球购物
德国户外装备、登山运动和攀岩商店：tapir store
2020/02/12 全球购物
CHARLES & KEITH加拿大官网：新加坡时尚品牌
2020/03/26 全球购物
实习医生自我评价
2013/09/22 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
商铺消防安全责任书
2014/07/29 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
公司出差管理制度范本
2015/08/05 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android