मैं एक HTML साइट पर काम कर रहा हूं, और मैं नेविगेशन के लिए एक ऑफ-कैनवास मेनू बनाना चाहता हूं। हालांकि मैंने जो कोड लिखा है वह बिल्कुल काम नहीं करेगा।

मैंने अपनी स्क्रिप्ट और एचटीएमएल/सीएसएस दस्तावेज़ को फिर से लिखने की कोशिश की है, मैंने एचटीएमएल, सीएसएस और जावास्क्रिप्ट को होस्ट करने के लिए स्थानीय वेबसर्वर बनाने की भी कोशिश की है ताकि यह देखा जा सके कि इससे कुछ भी बदल जाएगा, लेकिन ऐसा नहीं हुआ।

मैंने youtube और w3schools पर कुछ कोडिंग गाइड का पालन करने की भी कोशिश की है, लेकिन मैं इसे काम नहीं कर सकता। क्रिप्या मेरि सहायता करे।

आपका अग्रिम में ही बहुत धन्यवाद!

<body>
    <div id="main">
        <div id="header">
            <div id="hdt">

            </div>
            <div id="hdb">
                <span style="cursor: pointer" onclick="openNav">
                    &#9776; Menu
                </span>

                <div id="mysidenav" class="sidenav">
                    <a href="javascript:void(0)" class="exit" onclick="closeNav()">&times;</a>
                    <a href="#">Home</a>
                    <a href="#">Parts</a>
                    <a href="#">Services</a>
                    <a href="#">About us</a>
                </div>
            </div>
        </div>
        <div id="contain">

        </div>
        <div id="footer">

        </div>
    </div>
    <script type="text/javascript">
        function openNav() {
            document.getElementById("mysidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        }

        function closeNav() {
            document.getElementById("mysidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.body.style.backgroundColor = "white";
        }
    </script>

</body>
</html>

सीएसएस फ़ाइल:


#main {
    width: 1500px;
    height: 950px;
    transition: margin-left .5s
}

#header {
    width: 1500px;
    height: 100px;
}

#hdt {
    height: 75px;
    background-color: white;
}

#hdb {
    height: 25px;
    background-color: limegreen;
    border: 1px solid black;
    transition: margin-left .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .exit {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#contain {
    width: 1500px;
    height: 700px;
}

#footer {
    width: 1500px;
    height: 150px;
    background-color: black;
}
1
Adam Niclasson 20 जिंदा 2020, 16:34

1 उत्तर

सबसे बढ़िया उत्तर

आप अपने कोड में प्रारंभिक <html> टैग शामिल करना भूल गए हैं। लेकिन मुझे लगता है कि यह एक कॉपी और पेस्ट त्रुटि है;)

अपनी वास्तविक समस्या को हल करने के लिए, बस बदलें:

<span style="cursor: pointer" onclick="openNav">
       &#9776; Menu
</span>

प्रति:

<span style="cursor: pointer" onclick="openNav()">
       &#9776; Menu
</span>

यहां एक कामकाजी पहेली है: https://jsfiddle.net/r71n6cs9/12/

0
Hafnernuss 20 जिंदा 2020, 16:55