首页
所有分类
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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
ES6新特性一： let和const命令详解
Apr 20 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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) 暴雪(1) 艾尔登法环(1) 我的世界(1) 东方异文石(1) 巫师(1) 战锤40K(1) 绿林侠盗(1) 小缇娜的奇幻之地(1) LOL(1)
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue router demo详解
2017/10/13 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
Python中的日期时间处理详解
2016/11/17 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python——全排列数的生成方式
2020/02/26 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
NULL是什么,它是怎么定义的
2015/05/09 面试题
什么是会话Bean
2015/05/14 面试题
留学自荐信
2013/10/10 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
总经理检讨书
2014/09/15 职场文书
2014年学生工作总结
2014/11/20 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
如何写新闻稿
2015/07/18 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python