首页
所有分类
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 学习笔记二 字符串拼接
Mar 28 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
简单常用的幻灯片播放实现代码
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) 粒子对撞机(1) 塑料(1) 对撞机(1) 天问一号(1) 太空(1) 界面设计(1) 人造肉(1) 酶(1) 国际空间站(1)
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python 常用string函数详解
2016/05/30 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
购买正版游戏和游戏激活码：Green Man Gaming
2019/11/06 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android