目錄

前言

小米官網側邊欄

效果展示

html結構代碼

樣式代碼

JS代碼決議

總結

前言

小編歷時一個星期的艱苦奮斗，終于在第七天的末尾結束了小米官網的折磨，這段時間是真的難熬，當然小編也對JavaScript的用法以及理解層度，有了一定的提高，龐大的識訓總是伴隨著艱苦的學習程序，當你度過了艱苦的學習程序，你的識訓一定大于你的付出，

小米官網側邊欄

效果展示

• 滑鼠經過導航欄，導航欄會進行字體/背景顏色變換，左邊頁面顯示
• 滑鼠經過不同的導航欄，左邊頁面會彈出不同的頁面進行切換
• 滑鼠離開導航欄，左邊頁面會進行隱藏

html結構代碼

 <div class="banner-nav">
            <li><a href="JavaScript:;">手機</a></li>
            <li><a href="JavaScript:;">電視</a></li>
            <li><a href="JavaScript:;">筆記本</a>&nbsp;<a href="JavaScript:;">平板</a></li>
            <li><a href="JavaScript:;">家電</a></li>
            <li><a href="JavaScript:;">出行</a>&nbsp;<a href="JavaScript:;">穿戴</a></li>
            <li><a href="JavaScript:;">智能</a>&nbsp;<a href="JavaScript:;">路由器</a></li>
            <li><a href="JavaScript:;">電源</a>&nbsp;<a href="JavaScript:;">配件</a></li>
            <li><a href="JavaScript:;">健康</a>&nbsp;<a href="JavaScript:;">兒童</a></li>
            <li><a href="JavaScript:;">耳機</a>&nbsp;<a href="JavaScript:;">音響</a></li>
            <li><a href="JavaScript:;">生活</a>&nbsp;<a href="JavaScript:;">箱包</a></li>
        </div>

大家可以根據自己喜歡的方式來布局，不一定要和我這個一樣，這個是導航欄的布局，相信這個對大家來說還是很簡單的，

左邊出現那個盒子的代碼結構代碼就很多了，小編我給大家說一下我自己的一個思路好了，大家可以自己去試一下，

小編我是把左邊那個盒子利用絕對定位進行定位到導航欄的左邊的，我設定了一個高度和導航欄一樣高度的盒子，因為要做不同的頁面所以我在里面再次放了很多個盒子，每個盒子里面的內容都是不一樣的，但是他們的樣式都是相同的，他們里面內容的結構都是一樣的，與其說切換的是內容不如說是切換的是盒子，里面每個盒子的結構是這樣的，我在盒子里面又放了四個盒子，給四個盒子設定浮動讓他們并排顯示，當然他們的寬度是父盒子的四分之一，高度肯定是和父盒子一樣高，然后在給四個盒子里面都放上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';
        });
    }

總結

在辛苦的同時總是伴隨著意想不到的識訓，再多的困難努力克服之后都將成為你以后成功的經驗，努力的付出都會給你等同或者超越你付出的識訓，大家一起努力啊！