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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
js创建元素(节点)示例
Jan 02 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php 数组的一个悲剧?
2011/05/11 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
python 类详解及简单实例
2017/03/24 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python的多维空数组赋值方法
2018/04/13 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python系列 文件操作的代码
2019/10/06 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
小学教师党员承诺书
2015/04/27 职场文书
预备党员考察意见范文
2015/06/01 职场文书