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

2024-12-03 05:06:51

本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在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-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>

<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>

最常见的左侧分类菜单栏jQuery实现代码

打开京东.淘宝等各大类网站,最常见的就是左侧分类菜单栏了,既然这么常见的功能,那么应该怎么去实现它呢,接下来,我会在js中介绍两种实现方式,一种是引入jQuery的实现方式,一种是不引入jQuery的原生js的实现方式~~ 先看效果: 一.先准备资料 1)如果你们是用jQuery来开发网站的,肯定先要准备jQuery.js呀,这个百度一搜就有.不用jQuery开发的,可以忽略此步骤 2)准备一些图片,鼠标右键 > 图片另存为就可以保存 icon_nav.jpg: img_226x40.jpg:
Android PopupWindow实现右侧、左侧和底部弹出菜单

本教程为大家分享了Android PopupWindow弹出菜单的具体代码,供大家参考,具体内容如下项目代码:http://xiazai.jb51.net/201611/yuanma/PopupLeftMenu(jb51.net).rar 项目SDK是5.1,建议将代码拷到自己的工程中去代码如下: MainActivity类: package com.example.popupleftmenu; import android.app.Activity; import android.cont
原生JS实现仿淘宝网左侧商品分类菜单效果代码

本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码.分享给大家供大家参考.具体如下: 这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码,JavaScript技术实现,兼容各主流浏览器.自己再修改一下CSS菜单,它会变得更漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <head> <titl
javascript仿京东导航左侧分类导航下拉菜单效果

本文实例为大家分享了类似于京东.淘宝商城左侧分类导航下拉菜单,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <
PHP无限分类代码，支持数组格式化、直接输出菜单两种方式

复制代码代码如下: <?php /** +------------------------------------------------ * 通用的树型类 +------------------------------------------------ * @author yangyunzhou@foxmail.com +------------------------------------------------ * @date 2010年11月23日10:09:31 +-------
解决yii2左侧菜单子级无法高亮问题的方法

我们先来看看具体问题. 添加角色是属于角色这个菜单的,如何在执行添加角色这个操作时让角色这个菜单处于选中状态呢? adminlte左侧导航的Create,View等action不能定位到index的模块(左侧二级导航不能展开定位) 如果你是按照我们上文的教程来的,那接下来所要说明的问题应该不是问题,先来看看我们当时是怎么处理左侧菜单menu的 use mdm\admin\components\MenuHelper; <?php $callback = function($menu){ //鉴于篇
jQuery模仿京东/天猫商品左侧分类导航菜单效果

现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <
iOS实现顶部标签式导航栏及下拉分类菜单

本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码先看下jquery仿京东导航效果: 前端html代码如下: 复制代码代码如下: <ul> <li><a href="#">baidu</a></li> <div
winform树形菜单无限级分类实例

以下实现的是一个树形菜单,每一级对应一类窗口,点击叶子节点时弹出新的窗口: 用递归和委托实现的. 第一部分功能-创建树形菜单复制代码代码如下: /// <summary> /// 创建树形菜单 /// </summary> public void AddTree(int ParentID, TreeNode pNode) { // 数据库名字字段 string str

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

相关推荐

随机推荐