js导航栏左右滑动,导航栏滑动效果html

　　本文介绍了Html Css Jquery实现左侧滑动拉伸导航菜单栏的示例代码，分享给大家，具体如下：

　　个人电脑端

　　移动端

　　代码

　　！DOCTYPE htmlhtmlhead标题左侧导航/title meta charset= utf-8 script src= https://cdn。静态文件。org/jquery/1。10 .2/jquery。量滴js /script meta name= viewport content= width=设备宽度，initial-scale=1.0，maximum-scale=1.0，user-scale=0，viewport-fit=cover style * { margin:0；填充：0;} #头{宽度：100%;高度：60px背景：# fff位置：固定；top:0；} #头. DH _ BTN {宽度：60px高度：60px背景：# f00浮动：左；光标：指针；行高：60px文本对齐：居中；} #头user _ admin _ BTN { width:calc(100%-60px)；高度：60px背景：粉色；浮动：对；} # left _ DH { width:0；身高：100%;背景：# 39f显示：块；位置：固定；左：0;} # black _ BG { width:100%；身高：100%;位置：固定；背景：rgba(0，0，0，0.5)；z-index:-999999；显示：无；} /style/headbody bgcolor=#eee ！-头部-div id= header div class= DH _ BTN onclick= open left _ DH()打开/div div class= user _ admin _ BTN /div/div！-左侧导航- div id=left_dh/div！-半透明黑色背景-div id= black _ BG onclick= close left _ DH()/div！- jquery展开导航-脚本函数openLeft_dh() { $(#left_dh ).css({width:180px ， transition : 0.3s })；$(#black_bg ).css(display ， block )；}函数closeLeft_dh() { $(#left_dh ).css({ 宽度: 0 ,过渡： 0.3s })；$(#black_bg ).css(显示,无);}/脚本/正文/html到此这篇关于Html Css Jquery实现左侧滑动拉伸导航菜单栏的示例代码的文章就介绍到这了，更多相关超文本标记语言文件的后缀左侧滑动拉伸导航内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。