flex 布局 实现电商网页菜单的多级分类展示
用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅.
效果展示如下:
跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上线的按钮出现的方式,不过由于一级分类和二级分类没有不是父子关系,在处理一级分类hover对应二级分类改变样式的时候,不得不使用了js改变二级分类的样式
html页面设计如下:
<div class="left-menu">
<div class="left-menu-wrap">
<div class="left-menu-top">
<ul>
<li class="all"><a href="#">全部商品分类</a></li>
<li><a href="#">货比三家</a></li>
<li><a href="#">限时抢购</a></li>
<li><a href="#">平价超市</a></li>
<li><a href="#">实体验店</a></li>
<li><a href="#">溯源</a></li>
<li><a href="#">周期购</a></li>
</ul>
</div>
<div class="left-menu-bottom">
<div class="left-menu-bottom-warp">
<div class="left-menu-bottom-left">
<ul>
<li><a class="one" href="#">原汁原味</a></li>
<li><a class="two" href="#">特色零食</a></li>
<li><a class="three" href="#">高原鲜品</a></li>
<li><a class="four" href="#">生态粮油</a></li>
<li><a class="five" href="#">红茶特饮</a></li>
<li><a class="six" href="#">美酒佳酿</a></li>
<li><a class="seven" href="#">滋补养生</a></li>
<li><a class="eight" href="#">母婴专区</a></li>
<li><a class="nine" href="#">日用百货</a></li>
<li><a class="ten" href="#">生活家电</a></li>
</ul>
</div>
<div class="left-menu-bottom-right">
<ul style="padding-left: 20px;padding-right: 20px">
<li class="onehover"><a href="#">原汁原味</a><a href="#">原汁原味</a><a href="#">原汁原味</a></li>
<li class="twohover"><a href="#">特色零食</a><a href="#">特色零食</a><a href="#">特色零食</a></li>
<li class="threehover"><a href="#">高原鲜品</a><a href="#">高原鲜品</a></li>
<li class="fourhover"><a href="#">生态粮油</a><a href="#">生态粮油</a><a href="#">生态粮油</a><a href="#">生态粮油</a>
</li>
<li class="fivehover"><a href="#">茶特饮</a><a href="#">红茶特饮</a><a href="#">红茶特饮</a><a href="#">红茶特饮</a><a
href="#">红茶特饮</a><a
href="#">红茶特饮</a></li>
<li class="sixhover"><a href="#">美酒佳酿</a><a href="#">美酒佳酿</a><a href="#">美酒佳酿</a></li>
<li class="sevenhover"><a href="#">滋补养生</a><a href="#">滋补养生</a><a href="#">滋补养生</a></li>
<li class="eighthover"><a href="#">母婴专区</a><a href="#">母婴专区</a><a href="#">母婴专区</a><a href="#">母婴专区</a><a
href="#">母婴专区</a>
</li>
<li class="ninehover"><a href="#">日用百货</a><a href="#">日用百货</a><a href="#">日用百货</a></li>
<li class="tenhover"><a href="#">生活家电</a><a href="#">生活家电</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
css:
* {
margin:;
padding:;
list-style: none;
text-decoration: none;
text-outline: none;
background: none;
text-align: justify;
text-outline: none;
line-height: 20px;
text-space: 1px;
} .left-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ff260b;
height: 60px;
} .left-menu-wrap {
width: 1200px;
} .left-menu-top > ul {
display: flex;
flex-direction: row;
} .left-menu-top > ul > li {
flex:;
float: left;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} .left-menu-top > ul > li > a {
font-size: 18px;
flex:;
padding-top: 20px;
padding-bottom: 20px;
color: #FFF;
width: 100%;
text-align: center;
} .left-menu-bottom-warp {
position: absolute;
width: 300px;
height: 813px;
padding: 20px;
background: #f4f4f4;
} .left-menu-bottom {
display: none;
position: relative;
top:;
left:;
z-index:;
transition: 100s;
} .left-menu-bottom-left > ul > li {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} .left-menu-bottom-left > ul > li > a {
text-align: center;
width: 100%;
line-height: 80px;
color: #0C0C0C;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
margin-top: -1px;
} .left-menu-bottom-right {
position: absolute;
top:;
left: 340px;
width: 500px;
background: rgba(244, 244, 244, 0.91);
padding-top: 20px;
padding-bottom: 20px;
} .left-menu-bottom-right ul li {
padding-left: 20px;
padding-right: 20px;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-top: #e0e0e0 1px solid;
border-bottom: #e0e0e0 1px solid;
margin-top: -1px;
justify-content: flex-start;
align-items: center; } .left-menu-bottom-right ul li a {
color: #0C0C0C;
flex:;
} .left-menu-bottom-right ul li a:hover {
color: red;
} .all {
background: #9e0909;
}
.left-menu-bottom-right ul li:hover
{
background: #FFFFFF; }
javascript:
$(function () {
let bottom = $(".left-menu-bottom");
$(".all").hover(function () {
bottom.css("display", "block")
}, function () {
bottom.css("display", "none")
})
bottom.hover(function () {
bottom.css("display", "block")
}, function () {
bottom.css("display", "none")
})
$(".left-menu-bottom-left>ul li a").hover(function (e) {
$('.' + e.target.className + 'hover').css("background", "#FFFF");
}, function (e) {
$('.' + e.target.className + 'hover').css("background", "none");
});
$(" .left-menu-bottom-right ul li").hover(function (e) {
$(this).css("background", "#FFFFFF");
}, function (e) {
$(this).css("background", "none");
})
});
flex 布局 实现电商网页菜单的多级分类展示的更多相关文章
- flex 布局 实现电商页面商品展示floor
有了上一篇,对flex的初次使用,心里痒痒的试着,实现了电商首页,商品展示的floor,先看下效果: 要实现首先是对组件构件的拆解,拆解如下: 页面布局如下: <div class=" ...
- UI设计教程分享:电商网页页面设计常见表现手法
1.手绘插画 场景.人物以及加上故事的创意绘画 会给人梦幻若隐若现的感觉,留下深刻的印象,适合做活动页面以及宣传自已的品牌 2.简约 颜色少于三色,背景以明度偏低的颜色为主,在信息大爆炸的时代,我们 ...
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...
- Flutter移动电商实战 --(21)分类页_类别信息接口调试
先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPhysics(), 大R刷新后,点 ...
- Java生鲜电商平台-App系统架构开发与设计
Java生鲜电商平台-App系统架构开发与设计 说明:阅读此文,你可以学习到以下的技术分享 1.Java生鲜电商平台-App架构设计经验谈:接口的设计2.Java生鲜电商平台-App架构设计经验谈:技 ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- 14 微服务电商【黑马乐优商城】:day04-项目搭建(一)
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...
- java亿级流量电商详情页系统的大型高并发与高可用缓存架构实战视频教程
亿级流量电商详情页系统的大型高并发与高可用缓存架构实战 完整高清含源码,需要课程的联系QQ:2608609000 1[免费观看]课程介绍以及高并发高可用复杂系统中的缓存架构有哪些东西2[免费观看]基于 ...
- 以太坊开发DApp实战教程——用区块链、星际文件系统(IPFS)、Node.js和MongoDB来构建电商平台(一)
第一节 简介 欢迎和我们一起来用以太坊开发构建一个去中心化电商DApp!我们将用区块链.星际文件系统(IPFS).Node.js和MongoDB来构建电商平台类似淘宝的在线电商应用,卖家可以自由地出售 ...
随机推荐
- D3比例尺
D3中有个重要的概念就是比例尺.比例尺就是把一组输入域映射到输出域的函数.映射就是两个数据集之间元素相互对应的关系.比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所 ...
- Debian9服务器安装mysql
第一步 添加mysql软件源 下载mysql的配置文件: cd /tmp wget https://dev.mysql.com/get/mysql-apt-config_0.8.10-1_all ...
- Web基础学习
Servlet和Servlet容器.Web服务器概念:https://blog.csdn.net/lz233333/article/details/68065749 <初学 Java Web 开 ...
- 用html和css制作奥运五环
<html><head><meta charset="utf-8"> <style>.circle1,.circle2,.circl ...
- 深入理解hashCode
1.hashCode的概念 (1)hashCode方法是Object类的方法,在Java里所有类都默认继承Object类,即所有类都有hashCode方法. (2)hashCode是jdk根据对象的存 ...
- 微信为什么不能下载apk 微信不能打开App下载地址的问题
此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的. <?php error ...
- UVa LA 4094 WonderTeam 构造 难度: 1
题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...
- java实现二维码的生成.
目录 1.二维码概念 2.二维码发展历史 3.二维码分类 4.二维码优缺点 5.QR Code 1.二维码又称 二维条码 (2-dimensional bar code)是用某种特定的几何 ...
- 软工作业PSP与单元测试训练
任务说明(二选一): 一.实现模块判断传入的身份证号码的正确性: 二.实现模块判断传入的电子邮箱账号的正确性: 选择任务二: 实现要求: 一.实现功能模块: 1. 判断邮箱地址是否为空: 2. 判断邮 ...
- 洛谷P1993 小K的农场
思路是差分约束+dfs版SPFA. 首先来思考差分约束的过程,将题目给出的式子进行转化: 农场a比农场b至少多种植了c个单位的作物, SPFA我们考虑跑最短路,那么要让SPFA中满足的式子就是if(d ...