小米商城左侧菜单布局和效果实现(分析+代码)
目录
效果展示
结构分析
菜单栏
内容盒子
JS实现
总结
效果展示
- 左边菜单栏,鼠标经过菜单栏,对应的背景颜色会发生改变。
- 右边内容盒子,有一个边框,宽度会随着显示的内容的而变化。
- 鼠标经过左边的菜单栏,右边对应的盒子内容才会显示出来。
结构分析
菜单栏
用一个简单的 ul li 布局就行。
<ul class="b_nav"><li class="bnavli"><a href="#">手机 电话卡</a></li><li class="bnavli"><a href="#">电视 盒子</a></li><li class="bnavli"><a href="#">笔记本 平板</a></li><li class="bnavli"><a href="#">出行 穿戴</a></li><li class="bnavli"><a href="#">智能 路由器</a></li><li class="bnavli"><a href="#">健康 儿童</a></li><li class="bnavli"><a href="#">耳机 音响</a></li><li class="bnavli"><a href="#">智能 路由器</a></li><li class="bnavli"><a href="#">健康 儿童</a></li><li class="bnavli"><a href="#">耳机 音响</a></li>
</ul>
内容盒子
一个大的div盒子,由于有内容盒子的宽度要跟着内容的宽度而变化的效果,所以里面的内容是一列一列显示的,一列(一个ul)做的。里面的内容需要几列就复制几列就OK了,显示的文字图片内容自己修改修改。
!!!需要注意的一点:我们经过左边菜单栏,显示右边内容盒子,要是还想对内容盒子有其他的操作,比如想要鼠标可以点击里面的内容,那就一定要把内容盒子放到菜单栏对应的菜单栏里面。
<div class="bncontainer"><!--需要几列就复制ul,内容自己修改一下--> <ul><li><a href="#"><img src="upload/Redmi Note 10 Pro.webp" alt=""><span>Redmi Note 10</span></a></li><li><a href="#"><img src="upload/Redmi Note 10 Pro.webp" alt=""><span>Redmi Note 10</span></a></li><li><a href="#"><img src="upload/Redmi Note 10 Pro.webp" alt=""><span>Redmi Note 10</span></a></li><li><a href="#"><img src="upload/Redmi Note 10 Pro.webp" alt=""><span>Redmi Note 10</span></a></li><li><a href="#"><img src="upload/Redmi Note 10 Pro.webp" alt=""><span>Redmi Note 10</span></a></li> </ul>
</div>
JS实现
思路:设置最开始的内容盒子宽度为 0px,当鼠标经过以后,内容盒子的宽度就改变。
!!!获取变化的宽度=孩子的个数 X 一个孩子的宽度。
/* --左边导航栏右滑显示-- */
/* --获取元素-- */
var bnavlis = document.querySelectorAll('.bnavli');
var bncontainer = document.querySelectorAll('.bncontainer');for (var i = 0; i < bnavlis.length; i++) {bnavlis[i].setAttribute('data-index', i);bnavlis[i].addEventListener('mouseenter', function () {index = this.getAttribute('data-index');/* --获取变化的宽度=孩子的个数*其中一个孩子的宽度-- *//* --bncontainer[index] 返回的是对应的整个bncontainer-- */maxwidth = bncontainer[index].children.length*bncontainer[index].children[0].offsetWidth;bncontainer[index].style.width = maxwidth + 'px';bncontainer[index].style.borderColor = '#ccc';});bnavlis[i].addEventListener('mouseleave', function () {index = this.getAttribute('data-index');bncontainer[index].style.width = 0 + 'px';});
}
总结
这些效果都是常见的效果动图,只要弄懂一个就能举一反三,实现类似其他的效果。这里只分析了效果结构和JS实现,CSS修饰代码就不展示了(很简单的)。看完这篇,大家可以尝试去做一做小米商城上边导航栏的下滑效果,原理都一样,加油哦!
小米商城左侧菜单布局和效果实现(分析+代码)相关推荐
- b站黑马Vue2后台管理项目笔记——(2)主页布局(整体,Header,左侧菜单布局)
说明: 此项目中使用的是本地SQL数据库,Vue2. 其他功能请见本人后续的其他相关文章. 本文内容实现的最终效果如下图: e.g.点击二级菜单用户列表,就会跳转到用户列表对应的index的地址(用户 ...
- 前端学习(1878)vue之电商管理系统电商系统之左侧菜单布局
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开 在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
- 页面布局-左侧菜单右侧内容
左侧200px,右侧根据窗口自适应,右侧宽度小于800px的时候会出现滚动条 要实现的效果 html <div class="container"><div cl ...
- spa项目开发首页导航左侧菜单
前言:今天要分享的知识是spa项目完成首页导航以及左侧菜单 码字不易,转载请说明!!! 目录 目标 效果图 一.mock.js ①什么是Mock.js ②安装mockjs依赖 ③配置开发环境及生产环境 ...
- 一个web左侧菜单例子
一 左侧菜单简介并更换图标 图图: 码码: <link rel="stylesheet" type="text/css" href="js/tr ...
- ajax实现简单的点击左侧菜单,右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 图片.png 原 ...
- Python UI设计学习笔记,第四课:构建左侧菜单,使用 `QPushButton`
文章目录 第4课:构建左侧菜单,使用 `QPushButton` 第4课:构建左侧菜单,使用 QPushButton 在第三课的基础上,继续在ui_main_window.py文件中,为 左侧菜单se ...
- antd 实现 sidebar 左侧菜单·记
本文所用到的知识:react 相关和 antd 等. 关于 antd 之 Layout.Sider 使用说明请移步这里:布局 Layout - Ant Design 本文实现 sidebar 采取的是 ...
最新文章
- what???现在的研究生和导师普遍都没有真正理解科研的本质
- 当个新手很幸福!网络创业之新手小白一样可以吸粉又赚钱
- Day03——Python函数
- python中字符编码使用_python中字符编码是什么?如何转换字符?
- 前端学习(1698):前端系列javascript之原型链和instance
- 深入理解Golang之context
- python中json.dumps使用的坑以及字符编码
- iOS 程序上传流程
- OpenCV+dlib+Python实现人体五官检测
- MySQL双主机双Master方案测试
- 091030 T 焦点在外,框架API设计
- 封装HDLC协议实现两个路由器互相通信
- STM32学习之路——麒麟座V3.2开发板蜂鸣器发声问题
- 悟透Javascript(转载)
- 基于jsp servlet javabean的学生管理系统
- 区块链系统:挖矿原理
- [数据库实战]sql创建一个view视图
- [JVM]了断局: 虚拟机字节码指令表速查
- 宾得k5ii_【有图】小众宾得K5II学习一月有余,谈谈感想,发点作业-蜂鸟网
- js中click()与onclick()的区别
热门文章
- R ggplot2 Excel绘图(直方图/经验分布图/QQ图/茎叶图/箱线图)实例
- eclipse如何建立java项目
- 用python生成二维码并将APK文件部署到IIS站点变成二维码下载
- 烘焙分辨率影响烘焙的结果
- [转]:优化您的 WebSphere Application Servers
- mysql报错1304_mysql8 参考手册--错误代码1295-1317
- 给表格中的文字设置字体以及设置表格样式
- javascript事件 from PPK yahoo演讲
- roku能不能安装软件_如何在Roku上更改家长控制PIN
- 阿里云张新涛:异构计算为数字经济提供澎湃动力