小米商城左侧菜单布局和效果实现（分析+代码） |
您所在的位置：网站首页 › angular左侧菜单栏 › 小米商城左侧菜单布局和效果实现（分析+代码） |
小米商城左侧菜单布局和效果实现（分析+代码）
|
目录 效果展示 结构分析 菜单栏 内容盒子 JS实现 总结 效果展示
用一个简单的 ul li 布局就行。 手机 电话卡 电视 盒子 笔记本 平板 出行 穿戴 智能 路由器 健康 儿童 耳机 音响 智能 路由器 健康 儿童 耳机 音响 内容盒子一个大的div盒子，由于有内容盒子的宽度要跟着内容的宽度而变化的效果，所以里面的内容是一列一列显示的，一列（一个ul）做的。里面的内容需要几列就复制几列就OK了，显示的文字图片内容自己修改修改。 ！！！需要注意的一点：我们经过左边菜单栏，显示右边内容盒子，要是还想对内容盒子有其他的操作，比如想要鼠标可以点击里面的内容，那就一定要把内容盒子放到菜单栏对应的菜单栏里面。 
Redmi Note 10
Redmi Note 10
Redmi Note 10
Redmi Note 10
Redmi Note 10
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修饰代码就不展示了（很简单的）。看完这篇，大家可以尝试去做一做小米商城上边导航栏的下滑效果，原理都一样，加油哦！
|
【本文地址】
今日新闻 |
推荐新闻 |