js+css实现全屏侧边栏


Posted in Javascript onJune 16, 2020

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

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

HTML部分

<div id="mySidenav" class="sidenav">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
 <a href="#">About</a>
 <a href="#">Services</a>
 <a href="#">Clients</a>
 <a href="#">Contact</a>
 </div>
 <h2>全屏幕侧边栏</h2>
 <p>点击以下菜单图标打开侧边栏</p>
 <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ 打开</span>

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";
}

js+css实现全屏侧边栏

js+css实现全屏侧边栏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
JsChart组件使用详解
Mar 04 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 #Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 #Javascript
vue proxy 的优势与使用场景实现
Jun 15 #Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 #Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 #Javascript
为react组件库添加typescript类型提示的方法
Jun 15 #Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
JS中表单的使用小结
2014/01/11 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
会计岗位职责范本
2014/03/07 职场文书
环保建议书200字
2014/05/14 职场文书
三严三实对照检查材料
2014/08/25 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS