折磨我一个周的小米官网——小米侧边栏

Posted chnnds

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了折磨我一个周的小米官网——小米侧边栏相关的知识,希望对你有一定的参考价值。

目录

 

前言

小米官网侧边栏

效果展示

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';
        );
    



总结

        在辛苦的同时总是伴随着意想不到的收获,再多的困难努力克服之后都将成为你以后成功的经验。努力的付出都会给你等同或者超越你付出的收获。大家一起努力啊!

以上是关于折磨我一个周的小米官网——小米侧边栏的主要内容,如果未能解决你的问题,请参考以下文章

我在小米手机浏览器输入的qq官网地址点进去之后给我跳转成这个页面了,和我在电脑的网址域名不一样。

html+css仿制小米商城首页

求一份用HTML+css写最新的小米官网

有感于小米官网的中英文版本号的差异

案例:仿写小米导航栏

小米官网查询生产日期和启用日期