原生JS实现可折叠导航栏
JS 实现 原生 导航 可折叠
2023-06-13 09:16:13 时间
实现效果
制作过程
首先页面分为两个div,一个导航一个内容。其中内容中需要一个按钮用来控制折叠。
<div class="left-nav"></div>
<div class="cont">
<button>按钮</button>
</div>
加入样式
.left-nav{
width:280px;
height:1000px;
background:#343A40;
position: fixed;
left:0;
top:0;
color:rgba(255,255,255,.7);
font-size: 1.0rem;
overflow: hidden;
z-index: 2;
white-space:nowrap;
}
.cont{
width:auto;
margin-left:280px;
min-width: 1050px;
}
折叠效果是通过触发事件后,循环改变nav的宽度和cont的左边距实现cont盖住nav的视觉效果。但在代码中,并不能真的用for循环来做,那样在移动过程中js就会一直卡在循环中而不能执行其他代码,所以这里可以使用setInterval函数来做,它会每隔一段时间调用一次某个方法,格式为setInterval(调用函数,调用间隔时间,调用函数参数1,参数2,...);当任务完成时再通过clearInterval函数结束循环调用。 为了使移动更平滑,每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下:
/*关闭/打开导航*/
function closeNav(nav,body,navTargetWidth){
var thisTarget = nav.getBoundingClientRect().width + (navTargetWidth - nav.getBoundingClientRect().width)*0.1; //这次目标宽度
nav.style.width = (Math.abs(thisTarget-navTargetWidth)<0.5?navTargetWidth:thisTarget) + "px";
body.style.marginLeft = nav.style.width;
if(nav.getBoundingClientRect().width == navTargetWidth){
clearInterval(CWLN);
}
}
调用时机为触发指定事件时调用,这里事件分为,点击按钮,鼠标进入导航栏,鼠标移出导航栏三种。 当点击按钮后,判断当前导航栏是收缩还是展开状态,如果是收缩状态就将导航栏的宽和内容块的左外边距逐渐增长为展开时的值,反之同理。而判断是通过一个变量来标识导航栏状态实现。
var leftNavIsClose = false;
var leftNav = document.getElementsByClassName("left-nav")[0];
var body = document.getElementsByClassName("body")[0];
var minWidth_leftNav = 60;
var maxWidth_leftNav = 280;
CWLN = null;
document.getElementById("close-left-nav").onclick = function(){
if(leftNavIsClose)
CWLN = setInterval(closeNav,10,leftNav,body,maxWidth_leftNav);
else
CWLN = setInterval(closeNav,10,leftNav,body,minWidth_leftNav);
leftNavIsClose = !leftNavIsClose;
}
当鼠标进入和离开导航栏时:
document.getElementsByClassName("left-nav")[0].onmouseenter = function(){
clearInterval(CWLN);
CWLN = setInterval(closeNav,10,leftNav,body,maxWidth_leftNav);
}
document.getElementsByClassName("left-nav")[0].onmouseleave = function(){
if(leftNavIsClose){
clearInterval(CWLN);
CWLN = setInterval(closeNav,10,leftNav,body,minWidth_leftNav);
}
}
效果
完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left-nav{
width:280px;
height:1000px;
background:#343A40;
position: fixed;
left:0;
top:0;
color:rgba(255,255,255,.7);
font-size: 1.0rem;
overflow: hidden;
z-index: 2;
}
.body{
width:auto;
margin-left:280px;
min-width: 1050px;
}
</style>
</head>
<body>
<div class="left-nav">导航 导航导航</div>
<div class="body">
<button id="close-left-nav">按钮</button><br/>
内容内容内容
</div>
</body>
<script>
/*关闭/打开导航*/
function closeNav(nav,body,navTargetWidth){
var thisTarget = nav.getBoundingClientRect().width + (navTargetWidth - nav.getBoundingClientRect().width)*0.1; //这次目标宽度
nav.style.width = (Math.abs(thisTarget-navTargetWidth)<0.5?navTargetWidth:thisTarget) + "px";
body.style.marginLeft = nav.style.width;
if(nav.getBoundingClientRect().width == navTargetWidth){
clearInterval(CWLN);
}
}
var leftNavIsClose = false;
var leftNav = document.getElementsByClassName("left-nav")[0];
var body = document.getElementsByClassName("body")[0];
var minWidth_leftNav = 60;
var maxWidth_leftNav = 280;
CWLN = null;
document.getElementById("close-left-nav").onclick = function(){
if(leftNavIsClose)
CWLN = setInterval(closeNav,10,leftNav,body,maxWidth_leftNav);
else
CWLN = setInterval(closeNav,10,leftNav,body,minWidth_leftNav);
leftNavIsClose = !leftNavIsClose;
}
document.getElementsByClassName("left-nav")[0].onmouseenter = function(){
clearInterval(CWLN);
CWLN = setInterval(closeNav,10,leftNav,body,maxWidth_leftNav);
}
document.getElementsByClassName("left-nav")[0].onmouseleave = function(){
if(leftNavIsClose){
clearInterval(CWLN);
CWLN = setInterval(closeNav,10,leftNav,body,minWidth_leftNav);
}
}
</script>
</html>
相关文章
- vue JS 对象转数组[通俗易懂]
- 在 Nuxt.js 中配合 windicss 实现暗黑模式适配
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- Vue.js 滑动拼图验证码实现笔记
- 原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示
- js,jquery发送短信倒计时实现代码详解编程语言
- 使用 JavaScript 调用 Linux 命令的实现方法(js调用linux命令)
- 通用JS事件写法实现代码
- js根据给定的日期计算当月有多少天实现思路及代码
- .NET中利用js让子窗体向父页面传值的实现方法
- 根据经纬度计算地球上两点之间的距离js实现代码
- 原生js实现shift/ctrl/alt按键的获取
- 最好用的省市二级联动原生js实现你值得拥有
- JS过滤url参数特殊字符的实现方法
- js关于字符长度限制的问题示例探讨
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- 把字符串按照特定的字母顺序进行排序的js代码
- Js获取下拉框选定项的值和文本的实现代码
- 原生js实现淘宝首页点击按钮缓慢回到顶部效果
- 原生js实现fadein和fadeout淡入淡出效果
- 使用原生js实现页面蒙灰(mask)效果示例代码
- js中confirm实现执行操作前弹出确认框的方法
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 使用原生JS实现弹出层特效
- js实现遮罩层弹出框的方法
- js实现的捐赠管理完整实例