电商左侧商品分类菜单实现

无论是pc端还是手机端，都有类似左侧分类，点击后右侧切换内容的功能页面。

要想实现这个功能，首先第一步是要掌握左右布局的方法。

左右布局

推荐使用flex弹性布局

.parent {display: flex;
}
.left {width: 200px;height: 100%;background-color: red;
}
.right {display: flex;flex: 1;height: 100%;background-color: blue;
}

也可以使用absolute定位，通过left调整位置。

之后渲染左侧的菜单

<ul id="J_category" class="item"><li v-for="item in category"  @click="clickme(item.id)">{{ item.text }}</li>
</ul>

在菜单中添加点击事件，点击事件中传入相关的参数用于获取右侧内容。

在点击事件中处理右侧的显示内容，完整代码如下：

<!DOCTYPE html><head><title>左侧商品分类菜单</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head><body><style>html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
.sub-col{position:relative;z-index:999;}
.category{width:230px;border:1px solid #8A0E00;}
.category h3 {height:30px;line-height:30px;text-indent:15px;background:#A91319;color:#fff;}
.category ul li{height:30px;line-height:30px;text-indent:35px;background:#FFF8F6 url(arrow-r.png) no-repeat 205px center;border-bottom:1px solid #ECECEC;border-top:1px solid #fff;cursor:pointer;color:#A71F37;}
.category ul li:hover{background-color:#8A0E00;color:#fff;}
.pop-category{border:2px solid #8A0E00;background:#FDF5F5;position:absolute;left:200px;top:40px;z-index:1000;}
.pop-category .sub-item{width:390px;height:350px;}</style><div class="category" id="test"><h3>所有商品分类</h3><ul id="J_category" class="item"><li v-for="item in category"  @click="clickme(item.id)">{{ item.text }}</li></ul><div id="J_popCategory" class="pop-category"><div class='sub-item' style='display:none;' id="a">潮流服饰</div><div class='sub-item' style='display:none;' id="b">精品鞋包</div><div class='sub-item' style='display:none;' id="c">美容护肤</div><div class='sub-item' style='display:none;' id="d">珠宝饰品</div><div class='sub-item' style='display:none;' id="e">运动户外</div><div class='sub-item' style='display:none;' id="f">手机数码</div><div class='sub-item' style='display:none;' id="g">居家生活</div><div class='sub-item' style='display:none;' id="h">家电家装</div><div class='sub-item' style='display:none;' id="i">母婴用品</div><div class='sub-item' style='display:none;' id="j">食品保健</div></div></div><script>new Vue({el: '#test',data: {category: [{text: "潮流服饰",id: "a"}, {text: "精品鞋包",id: "b"}, {text: "美容护肤",id: "c"}, {text: "珠宝饰品",id: "d"}, {text: "运动户外",id: "e"}, {text: "手机数码",id: "f"}, {text: "居家生活",id: "g"}, {text: "家电家装",id: "h"}, {text: "母婴用品",id: "i"}, {text: "食品保健",id: "j"}]},mounted: function () {this.init();},methods: {init() {// TODO 初始化数据},clickme(id) {var subItems = document.getElementsByClassName('sub-item', 'div');for (var j = 0; j < subItems.length; j  ) {subItems[j].style.display = 'none';}const ele = document.getElementById(id)console.log(id, ele)ele.style.display = 'block';}}})</script>
</body></html>

转评赞就是最大的鼓励

电商左侧商品分类菜单实现相关推荐

【愚公系列】2022年10月微信小程序-优购电商项目-商品分类
文章目录前言一.商品分类 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品分类代码 1.相关代码 2.效果前言商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品分类
文章目录前言一.商品分类前言商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部分需要,将管理范围内的商品集合总体,以所选择的适当的商品基本特征作为分类标志,逐次归纳为若干 ...
【愚公系列】2022年11月 uniapp专题-优购电商首页-分类导航
文章目录前言一.分类导航 1.获取分类导航的数据 2.完整源码 3.效果前言商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部分需要,将管理范围内的商品集合总体,以所选择 ...
前端学习（1880）vue之电商管理系统电商系统之获取左侧菜单数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1878）vue之电商管理系统电商系统之左侧菜单布局
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1883）vue之电商管理系统电商系统之每次只能打开一个菜单项并解决边框问题
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
jquery实现电商网站分类导航菜单
一.HTML部分 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
电商生鲜网站开发（三）——后台开发：商品分类模块-Redis/Swagger/统一身份校验/IDEA技巧
电商生鲜网站开发(三)--后台开发:商品分类模块-Redis/Swagger/统一身份校验/IDEA技巧分类层级在商品分类上需要继续做归类操作分类设置成三级层级太深的弊端:对用户不友好,不利于 ...

电商左侧商品分类菜单实现

电商左侧商品分类菜单实现

左右布局

之后渲染左侧的菜单

电商左侧商品分类菜单实现相关推荐

最新文章

热门文章