折磨我一个周的小米官网——小米侧边栏
目录
前言
小米官网侧边栏
效果展示
html结构代码
样式代码
JS代码解析
总结
前言
小编历时一个星期的艰苦奋斗，终于在第七天的末尾结束了小米官网的折磨。这段时间是真的难熬。当然小编也对的用法以及理解层度，有了一定的提高。庞大的收获总是伴随着艰苦的学习过程，当你度过了艰苦的学习过程，你的收获一定大于你的付出。
小米官网侧边栏
效果展示
小米侧边栏
html结构代码
大家可以根据自己喜欢的方式来布局，不一定要和我这个一样，这个是导航栏的布局。相信这个对大家来说还是很简单的。
左边出现那个盒子的代码结构代码就很多了，小编我给大家说一下我自己的一个思路好了。大家可以自己去试一下。
小编我是把左边那个盒子利用绝对定位进行定位到导航栏的左边的，我设置了一个高度和导航栏一样高度的盒子。因为要做不同的页面所以我在里面再次放了很多个盒子，每个盒子里面的内容都是不一样的，但是他们的样式都是相同的，他们里面内容的结构都是一样的。与其说切换的是内容不如说是切换的是盒子。里面每个盒子的结构是这样的，我在盒子里面又放了四个盒子，给四个盒子设置浮动让他们并排显示，当然他们的宽度是父盒子的四分之一，高度肯定是和父盒子一样高，然后在给四个盒子里面都放上li标签，每个盒子放六个小li，最后在加上你们需要的内容就可以了。
样式代码
.main .banner-nav {float: left;width: 234px;height: 100%;padding-top: 10px;background-color: rgba(63, 61, 61);
}
.main .banner-nav li {width: 100%;height: 42px;line-height: 42px;padding: 4px 0 4px 20px;position: relative;
}
.main .banner-nav li a {color: #fff;font-size: 14px;text-decoration: none;
}
.main .banner-nav li::after {position: absolute;right: 20px;top: 14px;content: '';display: inline-block;width: 10px;height: 10px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}
.main .banner-nav li:hover {background-color: rgba(255, 106, 0);
}JS代码解析
var bannernav = document.querySelector('.banner-nav');var bannernavlis = bannernav.querySelectorAll('li');var bannerbox = document.querySelector('.banner-box');var childbox = bannerbox.querySelectorAll('.childbox');for (var j = 0; j < bannernavlis.length; j++) {bannernavlis[j].setAttribute('index', j);bannernavlis[j].addEventListener('mouseenter', function() {var index = this.getAttribute('index');bannerbox.style.display = 'block';for (var i = 0; i < childbox.length; i++) {childbox[i].style.display = 'none';}childbox[index].style.display = 'block';});bannernavlis[j].addEventListener('mouseleave', function() {bannerbox.addEventListener('mouseenter', function() {bannerbox.style.display = 'block';});bannerbox.addEventListener('mouseleave', function() {bannerbox.style.display = 'none';});bannerbox.style.display = 'none';});}总结
在辛苦的同时总是伴随着意想不到的收获，再多的困难努力克服之后都将成为你以后成功的经验。努力的付出都会给你等同或者超越你付出的收获。大家一起努力啊！
