HTML + CSS + jQuery to realize left sliding and stretching navigation menu bar

Time:2020-9-9

PC terminal

HTML + CSS + jQuery to realize left sliding and stretching navigation menu bar

Mobile terminal

HTML + CSS + jQuery to realize left sliding and stretching navigation menu bar

code

<!DOCTYPE html>
<html>
<head>
    < title > left navigation
    <meta charset="utf-8">
    <script></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">
    <! -- head -- >
    <div id="header">
        <div class="dh_ btn" onclick="openLeft_ Dh() "> Open < / div >
        <div class="user_admin_btn"></div>
    </div>

    <! -- left navigation -- >
    <div id="left_dh"></div>

    <! -- translucent black background -- >
    <div id="black_bg" onclick="closeLeft_dh()"></div>
    
    <! -- jQuery expand navigation -- >
    <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>

Author:TANKING
Web:likeyunba.com
Date:2020-03-17
WeChat:face6009

Recommended Today

Object memory layout and object access location

First, feel the memory layout through an example CustomerTest public class CustomerTest { public static void main(String[] args) { Customer cust = new Customer(); } } Customer image.png Memory layout at this time image.png notice: 1. Runtime metadata:There are some information describing the current instance, such as hash value and lock status.2. Name is the […]