[上海|荣耀师兄]JS-付东华|2019年01月10日的日报-技能树.IT修真院

发表于： 2019-01-10 00:06:48

1 674

今天完成的事情：

1.做完任务13并通过审核；

2.学习了任务14的组件化知识点；

遇到的困难：

1.问题：侧边栏动画效果失败，移动的是侧边栏，不能让主体右移；

解决：设置优先级和position：relative，使按钮与主体相连接，点击后主体的positiong右移，头部采用固定定位。

html代码：

<div class="all">
        <input type="checkbox" id="sidemenu" />
        <ul class="sideul">
            <a href="##">
                <li><span>公告</span><span class="arrow"></span></li>
            </a>
            <a href="##">
                <li><span>设置</span><span class="arrow"></span></li>
            </a>
            <a href="##">
                <li><span>帮助</span><span class="arrow"></span></li>
            </a>
            <a href="##">
                <li><span>关于</span><span class="arrow"></span></li>
            </a>
        </ul>

        <div class="container">
            <header>    
                <label id="control" for="sidemenu">≡</label>
            </header>

css代码：

/*隐藏checked复选框*/
#sidemenu {
display: none;
}

#sidemenu:checked ~ .container {
right: -70vw;
/*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/
}

/* 菜单框 */
.sideul {
position: absolute;
width: 70vw;
height: 100vh;
background-color: #FFFFFF;
}

.sideul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
font-size: 20px;
border-bottom: 1px solid #F0F0F0;
color: #29BDE0;
}

.sideul li .arrow {
width: 0.2rem;
height: 0.2rem;
border-top: .02rem solid #69D1E9;
border-right: .02rem solid #69D1E9;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.container {
position: relative;
right: 0;
height: 100vh;
background: #F0F0F0;
-webkit-transition: 1s;
transition: 1s;
}

.container header {
height: .44rem;
background-color: #29BDE0;
}

.container header #control {
font-size: 30px;
color: #FFFFFFFF;
padding: 0 10px;
margin-left: 10px;
}