08月25, 2018

纯css实现带遮罩的滑动侧边导航

纯css实现带遮罩的滑动侧边导航

如图,一个简单的例子,预览地址:纯css实现带遮罩的滑出滑入侧边导航

我的思路是利用checkboxlabel来实现这个简单的例子。

HTML

input单选框以及label要放到所有侧边栏的前边,等会需要用兄弟选择器来控制。

<input type="checkbox" id="checkbox">
<label id="label" for="checkbox"></label>
<aside class="side">
    <nav class="side-nav">
        <a href="#">首页</a>
        <a href="#">归档</a>
        <a href="#">标签</a>
        <a href="#">搜索</a>
    </nav>
</aside>
<header class="header">
    <span class="side-btn"></span>
</header>
<div class="main">
    <p>11内容内容内容内容内容内容</p>
</div>

基础布局样式

按钮是利用span来实现样式的,然后把label放到这个按钮上边,并且全透明。

.wrap {
    width: 100%;
    min-height: 100%;
}

.side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background: #333;
    transition: transform .3s;
    transform: translate3d(-100%,0,0);
}

.side-nav {
    margin-top: 30px;
}
.side-nav a {
    display: block;
    line-height: 40px;
    text-align: center;
    color: #ccc;
    text-decoration: none;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #fff;
}
.header .side-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: url(side-btn.png) no-repeat center;
    background-size: 20px;
}
.main{
    width: 100%;
    min-height: 100%;
    padding: 50px 10px 0 10px;
    box-sizing: border-box;
}

控制的CSS

下边是当checkbox为选中状态的时候:

  1. 控制它之后的兄弟元素label为全屏大小,并且设置了0.3透明度的黑色。
  2. 控制它之后的兄弟元素side为滑出状态,这里我是利用css3的3D转换来实现的,也可以用定位或者margin什么的,不过我还是推荐用3D转换。
#checkbox{
    display: none;
}
#label{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 50px;
    height: 50px;
    background: transparent;
}
#checkbox:checked ~ label{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
}
#checkbox:checked ~ .side{
    transform: translate3d(0,0,0);
}

本文链接:http://www.mobai.pro/post/纯css实现带遮罩的滑动侧边导航.html

-- EOF --

Comments