您的位置：首页 > Web前端 > > 正文

html导航条下拉菜单代码（Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码）

更多时间：2021-10-12 00:29:25 类别：Web前端浏览量：2511

html导航条下拉菜单代码

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

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

PC端

html导航条下拉菜单代码（Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码）

移动端

html导航条下拉菜单代码（Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码）

代码

<!DOCTYPE html>
<html>
<head>
    <title>左侧导航</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style>
        *{
            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;
        }
    </style>
</head>
<body bgcolor="#eee">
    <!-- 头部 -->
    <li id="header">
        <li class="dh_btn" onclick="openLeft_dh()">打开</li>
        <li class="user_admin_btn"></li>
    </li>

    <!-- 左侧导航 -->
    <li id="left_dh"></li>

    <!-- 半透明黑色背景 -->
    <li id="black_bg" onclick="closeLeft_dh()"></li>
    
    <!-- jquery展开导航 -->
    <script> 
        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");
        }
    </script>
</body>
</html>

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

标签：HTML css jquery 左侧滑动拉伸导航菜单栏

上一篇：dedecms后台关键词（DedeCms防止垃圾文章群发、垃圾评论和注册的方法）

下一篇：云服务器哪种操作系统好（云服务器选什么操作系统比较好？）

您可能感兴趣

html导航条下拉菜单代码（Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码）

html导航条下拉菜单代码

热门推荐

排行榜