静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...

本文介绍了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");

}

到此这篇关于Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码的文章就介绍到这了,更多相关Htm左侧滑动拉伸导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！