html在侧边栏,js+css实现全屏侧边栏

本文实例为大家分享了js实现全屏侧边栏的具体代码，供大家参考，具体内容如下

在浏览网站时我们经常会看到一个菜单按钮，点一下就会出现一栏侧边导航栏，直接上代码！

HTML部分

About

Services

Clients

Contact

全屏幕侧边栏

点击以下菜单图标打开侧边栏

☰ 打开

css部分

body {

font-family: "Lato", sans-serif;

}

.sidenav {

height: 100%;width: 0;position: fixed;z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; text-align:center;

}

.sidenav a {

padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px;color: #818181; display: block; transition: 0.3s;

}

.sidenav a:hover{ color: #f1f1f1;

}

.sidenav .closebtn {position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;

}

@media screen and (max-height: 450px)

{ .sidenav {padding-top: 15px;

}

.sidenav a {font-size: 18px;

}

JavaScript部分

function openNav() {

document.getElementById("mySidenav").style.width = "100%";

}

function closeNav() {

document.getElementById("mySidenav").style.width = "0";

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html在侧边栏,js+css实现全屏侧边栏相关推荐

全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
Js广告_全屏漂浮广告效果
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Conten ...
css显示全屏背景图片
css设置全屏背景图片 *{ margin: 0; padding: 0; } ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
js 弹出全屏窗效果
下面分别是css代码,div代码和js代码,多动手,进步就大,下面的代码需要自己分别把代码复制到你的代码中,可以先放到一个html文件中看下效果,哪果可以用的话可以复制过去,如果有些出入的话,可以修改 ...
js实现浏览器全屏 F11全屏
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐: 代码如下: // 判断各种浏览器,找到正确的方法 funct ...
CSS实现全屏遮罩
为什么80%的码农都做不了架构师?>>> 现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qz ...

html在侧边栏,js+css实现全屏侧边栏

全屏幕侧边栏

html在侧边栏,js+css实现全屏侧边栏相关推荐

最新文章

热门文章