精品性高朝久久久久久久,亚洲日韩乱码人人爽人人澡人

主頁 > 知識(shí)庫 > Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼

Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼

本文介紹了Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼，分享給大家，具體如下:

PC端

移動(dòng)端

代碼

<!DOCTYPE html>
<html>
<head>
    <title>左側(cè)導(dǎo)航</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">
    <!-- 頭部 -->
    <div id="header">
        <div class="dh_btn" onclick="openLeft_dh()">打開</div>
        <div class="user_admin_btn"></div>
    </div>

    <!-- 左側(cè)導(dǎo)航 -->
    <div id="left_dh"></div>

    <!-- 半透明黑色背景 -->
    <div id="black_bg" onclick="closeLeft_dh()"></div>
    
    <!-- jquery展開導(dǎo)航 -->
    <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>

到此這篇關(guān)于Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼的文章就介紹到這了,更多相關(guān)Htm左側(cè)滑動(dòng)拉伸導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

標(biāo)簽：阿壩盤錦中山金昌萍鄉(xiāng) 綏化聊城赤峰

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼》，本文關(guān)鍵詞 Html+Css+Jquery,實(shí)現(xiàn),左側(cè),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。