html css右拉菜单栏,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

作者：TANKING