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

不言

发布时间：2018-05-29 09:59:23

2447人浏览过

来源于php中文网

原创

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

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

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

复制代码代码如下:

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

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

恒浪威购商城

基于asp.net2.0框架技术与企业级分布式框架以及与 ms sql server 2000数据库无缝集合而成，并且融合当前流行的ajax技术进行编写的电子商务系统，她整合了多用户商城、单用户商城功能和恒浪网站整合管理系统，吸收绝大部分同类产品的精华和优点，独创网络团购（b2t）电子商务模式，流程化的团购功能和视频导购等功能，是一款极具商业价值的电子商务系统。商城前台功能概述：商城会员可前台自行

下载

复制代码代码如下:

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

这时初始状态的图片地址,鼠标滑过图片不用指定,但要和初始图片在同一目录下.
仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery
下面是完整的源代码文件 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?7.1.34"></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 p.menu-panel.selected { 
display : block; 
} 

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

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

实现两级联动下拉菜单并确保表单能同时提交分类ID与子分类ID

实现 HTML 下拉联动并保留表单提交所需的 value 值

Prisma 查询中筛选存在关联数据的子分类（非空菜单）

Prisma 查询非空关联数据：使用 some 过滤存在关联记录的子分类

Prisma 查询非空关联数据：如何筛选拥有至少一个菜单的子分类

淘宝

淘宝是一个好逛、丰富、有趣的消费生活社区，每天有亿万消费者来淘宝“逛街”：发现好物、找到乐趣、表达体验……淘宝能满足人们生活中的各种需求，有需要的小伙伴快来保存下载体验吧！

下载

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

526

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

494

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

638

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5782

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

492

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

218

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

240

2023.09.14