首页
所有分类
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 相关文章推荐
用户注册常用javascript代码
Aug 29 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
vue随机验证码组件的封装实现
Feb 19 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
PL550(1) H-501(1) SHARP(1) PL450(1) RP2100(1) BCL3000(2) ICF-SW07(1) ICF-SW7600(1) 乐信(1) 低放电路(1)
You might like
PHP 数组教程 定义数组
2009/10/23 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
angular中的cookie读写方法
2017/08/02 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python 日志增量抓取实现方法
2018/04/28 Python
python中map的基本用法示例
2018/09/10 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
CSS3 渐变（Gradients）之CSS3 线性渐变
2016/07/08 HTML / CSS
新加坡领先的时尚生活方式零售品牌：CHARLES & KEITH
2018/01/16 全球购物
凯撒娱乐：Caesars Entertainment
2018/02/23 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
文明村创建实施方案
2014/03/27 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
检讨书怎么写
2015/01/23 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
Python如何将list中的string转换为int
2022/07/15 Ruby