CSS 侧边栏在小屏设备中进行隐藏

Unsplash

侧边栏的作用应该就不用多说了吧，能够很方便我们回到网页的指定位置，在大屏设备中，侧边栏往往是悬浮于屏幕右侧，很方便用户的使用，但在小屏设备中，屏幕空间有限，所以我们会通过隐藏侧边栏的方式，来节省视口空间的使用

我们先来看下，在大屏设备中，侧边栏如何显示，继而再讲述，从大屏设备切换到小屏设备，侧边栏如何隐藏，国际惯例，先看 HTML 结构代码

<div id="nav_1">
    <img src="img/1.jpg">
</div>
<div id="nav_2">
    <img src="img/2.jpg">
</div>
<div id="nav_3">
    <img src="img/3.jpg">
</div>
<div id="nav_4">
    <img src="img/4.jpg">
</div>

<div class="c_nav_tips"></div>
<div class="c_nav_side">
    <ul>
        <li>
            <a href="#nav_1" class="c_nav_1"></a>
        </li>
        <li>
            <a href="#nav_2" class="c_nav_2"></a>
        </li>
        <li>
            <a href="#nav_3" class="c_nav_3"></a>
        </li>
        <li>
            <a href="#nav_4" class="c_nav_4"></a>
        </li>
    </ul>
</div>

CSS 媒体查询代码如下

@media screen and (min-width: 1410px) {
    .c_nav_side{
        position: absolute;             
        top: 1000px;
        left: 80%;
    }
    .c_nav_fix{
        position: fixed;
        top: 140px;
    }
    .c_nav_tips {
        display: none;
    }
}

JS 滚动条事件代码如下

$(window).on('scroll', function(){
    if($(this).scrollTop() > 855){
        $navSide.addClass('c_nav_fix');
    }else{
        $navSide.removeClass('c_nav_fix');
    }
});

min-width:1410px 运行结果

而在一些小屏设备中，如笔记本电脑，屏幕空间有限，我们通常选择将侧边栏进行隐藏，只有在浏览者需要用到侧边栏中的时候，再将侧边栏显示出来，在宽度小于等于 1410 px 的设备中，侧边栏将会在屏幕右侧进行隐藏，并会出现一个提示图片，当鼠标移至图片上时，提示图片隐藏，侧边栏出现；当鼠标从侧边栏上移开时，侧边栏隐藏，提示图片出现

CSS 媒体查询代码如下

@media screen and (max-width: 1410px) {
    .c_nav_side {
        right: -240px;
        position: fixed;
        top: 140px;
    }
    .c_nav_tips {
        display: block;
    }
}

JS 鼠标事件代码如下

$('.c_nav_tips').on('mouseenter', function(){
    $('.c_nav_tips').animate({'right': '-120px'});
    $('.c_nav_side').animate({'right': '10px'});
});
$('.c_nav_side').on('mouseleave', function(){
    $('.c_nav_tips').animate({'right': '0px'});
    $('.c_nav_side').animate({'right': '-240px'});
})

max-width:1410px 运行结果

本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^