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

最新推荐文章于 2021-05-10 10:54:28 发布

剑桥2048

最新推荐文章于 2021-05-10 10:54:28 发布

阅读量3.8k

点赞数

分类专栏：前端开发文章标签：仿当当网分类菜单 jQuery Javascript CSS

本文链接：https://blog.csdn.net/zhang_shuzhen/article/details/11972021

版权

本文介绍了一种实现类似当当网、淘宝网等电商网站的分类导航菜单的方法，重点在于CSS的设计。通过创建一个绝对定位的div来形成开口效果，使用display:inline-block确保链接不换行，并详细说明了如何添加和切换菜单项的图标。源代码可在sidebar.html中查看。

摘要由CSDN通过智能技术生成

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

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

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

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

这时初始状态的图片地址,鼠标滑过图片不用指定,但要和初始图片在同一目录下.

下面是完整的源代码文件 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-sty