"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > HTML सीएसएस और जावास्क्रिप्ट का उपयोग कर नेवबार ड्रॉअर https://www.instagram.com/webstreet_code/

HTML सीएसएस और जावास्क्रिप्ट का उपयोग कर नेवबार ड्रॉअर https://www.instagram.com/webstreet_code/

2024-11-19 को प्रकाशित
ब्राउज़ करें:284

Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/

हमें इंस्टाग्राम पर फॉलो करें: https://www.instagram.com/webstreet_code/



    
    
    दराजशीर्षक>
    
   

    *{
        मार्जिन: 0;
        पैडिंग: 0;
        बॉक्स-आकार: बॉर्डर-बॉक्स;
        फ़ॉन्ट-फ़ैमिली: 'पॉपिन्स', सैन्स-सेरिफ़;
    }

    शरीर {
            पृष्ठभूमि-रंग: #141625;
            प्रदर्शन: फ्लेक्स;
            संरेखित-आइटम: केंद्र;
            औचित्य-सामग्री: फ्लेक्स-स्टार्ट;
            ऊंचाई: 100vh;
            ओवर फलो हिडेन;
        }
        .हैमबर्गर{
            स्थिति: निरपेक्ष;
            शीर्ष: 20px;
            बाएँ: 18px;
            कर्सर: सूचक;
            z-सूचकांक: 10;
        }

        .हैमबर्गर .लाइन{
            चौड़ाई: 35px;
            ऊँचाई: 4px;
            पृष्ठभूमि-रंग: #f0a500;
            मार्जिन:6px 0;
            सीमा-त्रिज्या: 2px;
            संक्रमण: सभी 0.4 सहजता;
        }

        ।मेनू पट्टी {
            स्थिति: निश्चित;
            शीर्ष: 0;
            बाएँ: 0;
            चौड़ाई: 80px;
            ऊंचाई: 100%;
            पृष्ठभूमि-रंग: #1f2235;
            बॉक्स-छाया: 2px 0 15px rgba(0, 0, 0, 0.6);
            ओवर फलो हिडेन;
            संक्रमण: चौड़ाई 0.4s आसानी;

        }

        .मेनू-बार.ओपन {
            चौड़ाई: 220px;
        }

        .मेनू-बार उल {
            सूची-शैली: कोई नहीं;
            पैडिंग: 80px 10px;
        }
        .मेनू-बार उल ली {
            प्रदर्शन: फ्लेक्स;
            संरेखित-आइटम: केंद्र;
            पैडिंग: 15px;
            रंग: #b2becd;
            कर्सर: सूचक;
            संक्रमण: पृष्ठभूमि-रंग 0.3s सहजता;
            बॉर्डर-बाएँ: 4px ठोस पारदर्शी;
        }

        .मेनू-बार उल ली आई {
            फ़ॉन्ट-आकार: 24px;
            मार्जिन-राइट: 20px;
            संक्रमण: 0.3s आसानी से बदलना;
        }
        .मेनू-बार उल ली स्पैन {
            अपारदर्शिता: 0;
            फ़ॉन्ट-आकार: 16px;
            संक्रमण: अपारदर्शिता 0.4s सहजता;
            व्हाइट-स्पेस: अब्रैप;
        }

        .मेनू-बार.ओपन उल ली स्पैन {
            अपारदर्शिता: 1;
        }

        .मेनू-बार उल ली: होवर {
            पृष्ठभूमि-रंग: #282a40;
            बॉक्स-छाया: 0 4पीएक्स 8पीएक्स आरजीबीए(0, 0, 0, 0.2);
        }

        .मेनू-बार उल ली: होवर आई {
            परिवर्तन: स्केल(1.2);
        }

        .मेनू-बार उल ली.सक्रिय {
            पृष्ठभूमि-रंग: #f0a500;
            बॉर्डर-त्रिज्या: 20px;
            रंग: #1f2235;
            बॉर्डर-बाएँ: 4px ठोस #f0a500;
        }

        .मेनू-बार उल ली.सक्रिय i {
            रंग: #1f2235;
        }

        .मेनू-बार उल ली.सक्रिय अवधि {
            रंग: #1f2235;
        }

















   शैली>


    
विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/prince_beec5ccde00b7c6c73/navbar-drawer-using-html-css-and-javascript-httpswwwinstagramcomwebstreetcode-afh?1 यदि कोई उल्लंघन है, तो कृपया हटाने के लिए स्टडी_गोलंग@163.com पर संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3