本文实例为大家分享了js实现全屏侧边栏的具体代码,供大家参考,具体内容如下在浏览网站时我们经常会看到一个菜单按钮,点一下就会出现一栏侧边导航栏,直接上代码!
HTML部分

×
About
Services
Clients
Contact

全屏幕侧边栏


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


☰ 打开



×
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;

}

}
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";
}
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}以上就是本文的全部内容,希望对大家的学习有所帮助。