小屏隐藏大屏幕显示css,CSS 侧边栏在小屏设备中进行隐藏

Unsplash

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

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

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

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