左侧侧拉栏html,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏

PC端

移动端

代码

左侧导航

*{

margin:0;

padding:0;

}

#header{

width: 100%;

height: 60px;

background: #fff;

position: fixed;

top: 0;

}

#header .dh_btn{

width: 60px;

height: 60px;

background: #f00;

float: left;

cursor: pointer;

line-height: 60px;

text-align: center;

}

#header .user_admin_btn{

width: calc(100% - 60px);

height: 60px;

background: pink;

float: right;

}

#left_dh{

width: 0;

height: 100%;

background: #39f;

display: block;

position: fixed;

left: 0;

}

#black_bg{

width: 100%;

height: 100%;

position: fixed;

background: rgba(0,0,0,0.5);

z-index: -999999;

display: none;

}

打开

function openLeft_dh() {

$("#left_dh").css({"width":"180px","transition":"0.3s"});

$("#black_bg").css("display","block");

}

function closeLeft_dh() {

$("#left_dh").css({"width":"0","transition":"0.3s"});

$("#black_bg").css("display","none");

}

Author:TANKING

Web:likeyunba.com

Date:2020-03-17

WeChat:face6009

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Html+Css+Jquery实现左侧滑动拉伸导航菜单栏]http://www.zyiz.net/tech/detail-119094.html