这篇文章主要介绍了Html + Css + Jquery如何实现左侧滑动拉伸导航菜单栏,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
PC端
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; title>左侧导航& lt;/title>
,,,& lt; meta charset=皍tf-8"比;
,,,& lt; https://www.yisu.com/zixun/script src=" https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js ">
<时尚>
* {
保证金:0;
填充:0;
}
#标题{
宽度:100%;
高度:60 px;
背景:# fff;
位置:固定;
上图:0;
}
# header .dh_btn {
宽度:60 px;
高度:60 px;
背景:# f00;
浮:左;
光标:指针;
行高:60 px;
text-align:中心;
}
# header .user_admin_btn {
宽度:钙(100% - 60 px);
高度:60 px;
背景:粉色;
浮:正确;
}
# left_dh {
宽度:0;
高度:100%;
背景:# 39 f;
显示:块;
位置:固定;
左:0;
}
# black_bg {
宽度:100%;
高度:100%;
位置:固定;
背景:rgba (0, 0, 0, 0.5);
z - index: -999999;
显示:没有;
}>