如何将汉堡按钮作为覆盖层保留在全屏Leaflet地图上？

Got it, let's fix this up for you! The core issue here is that your hamburger button was nested inside the blue .navbar element—so when you removed the navbar, the button disappeared with it. Plus, your JavaScript was referencing a non-existent #main element instead of your actual map container. Let's adjust everything to get the result you want.

The Fix Breakdown #

We'll:

• Pull the hamburger button out of the navbar (and delete the navbar entirely)
• Style the button to float over the map with fixed positioning
• Update the JS to target the map instead of the missing #main element
• Tweak the sidebar padding to work without the navbar height pushing it down

Modified Code #

Updated HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <link rel="stylesheet" href="style.css">
    <style>
        html, body, #map{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            z-index: 0;
            background-color: rgb(38, 38, 38);
        }
    </style>
    <title>Map Testing</title>
</head>
<body>
    <!-- Hamburger button now stands alone, outside the navbar -->
    <span class="open-slide">
        <a href="#" onclick="openSlideMenu()">
            <svg width="30" height="30">
                <path d="M0,5 30,5" stroke="#fff" stroke-width="5"/>
                <path d="M0,14 30,14" stroke="#fff" stroke-width="5"/>
                <path d="M0,23 30,23" stroke="#fff" stroke-width="5"/>
            </svg>
        </a>
    </span>

    <div id="side-menu" class="side-nav">
        <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
        <a href="#">Data</a>
        <a href="#">Imports</a>
        <a href="#">Exports</a>
        <a href="#">Markers</a>
    </div>

    <div id="map">
        <script src="myscripts.js"></script>
    </div>

    <script>
        function openSlideMenu() {
            // Target the map instead of the non-existent #main
            document.getElementById('side-menu').style.width='300px';
            document.getElementById('map').style.marginLeft='300px';
        }

        function closeSlideMenu() {
            document.getElementById('side-menu').style.width='0';
            document.getElementById('map').style.marginLeft='0';
        }
    </script>
</body>
</html>

Updated CSS

body{
    font-family: "Arial", serif;
    background-color: #f4f4f4;
    overflow-x: hidden;
}

/* Style the standalone hamburger button */
.open-slide {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2; /* Ensures button stays above map and sidebar */
}

.open-slide a {
    display: block;
    padding: 8px;
    background-color: rgba(59, 89, 152, 0.8); /* Match original navbar color with transparency */
    border-radius: 4px;
}

.open-slide a:hover {
    background-color: rgba(221, 221, 221, 0.8);
}

.side-nav{
    height:100%;
    width:0;
    position: fixed;
    z-index:1;
    top:0;
    left:0;
    background-color:#111;
    opacity: 0.8;
    overflow-x:hidden;
    padding-top: 60px; /* Adjusted to work without navbar height */
    transition: 0.5s;
}

.side-nav a{
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    font-size:22px;
    color:#ccc;
    display:block;
    transition:0.3s;
}

.side-nav a:hover{
    color:#fff;
}

.side-nav .btn-close{
    position: absolute;
    top:0;
    right:22px;
    font-size:36px;
    margin-left: 50px;
}

/* Removed #main styles since we're using #map instead */
@media(min-width:568px){
    /* Optional: Adjust button size or position for larger screens if needed */
}

Key Changes Explained #

• Independent hamburger button: We moved it outside the navbar so it doesn't get removed when we delete the navbar element.
• Fixed positioning: position: fixed keeps the button anchored in place even when the map is panned or zoomed, and z-index:2 ensures it stays above all other elements.
• JS update: Swapped references to #main with #map so the map shifts correctly when the sidebar opens/closes.
• Button styling: Added a semi-transparent background matching your original navbar color, plus hover effects to maintain the same feel as before.

This setup gives you a full-screen Leaflet map with a floating hamburger button that opens your sidebar—no blue navbar in sight!

内容的提问来源于stack exchange，提问作者Jackson_Stake