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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
vue.js实现简单购物车功能
May 30 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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下载远程文件类(支持断点续传)
2008/11/14 PHP
php 定界符格式引起的错误
2011/05/24 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python占用的内存优化教程
2019/07/28 Python
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
本科生详细的自我评价
2013/09/19 职场文书
财务会计专业毕业生自荐信
2013/10/02 职场文书
生物化工工艺专业应届生求职信
2013/10/08 职场文书
网络宣传方案
2014/03/15 职场文书
美化环境标语
2014/06/20 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
转正申请报告格式
2015/05/15 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js