सीएसएस-ओनली हैमबर्गर मेन्यू कैसे बनाएं

May 04 2023

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

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

मुझे याद है कि जब मैं इसे बना रहा था तो मुझे इसे पूरा करने के तरीके के बारे में इंटरनेट पर एक पूर्ण उदाहरण नहीं मिला, और इसमें वांछित परिणाम प्राप्त करने के लिए बहुत सारे परीक्षण और त्रुटि निहित हैं। इसलिए, मैंने मेनू का कोड निकाला और इसे एक सरलीकृत उदाहरण में बदल दिया।

आवश्यक वस्तुएँ

जब मैंने इस परियोजना को शुरू किया, तो मेरे पास कुछ आवश्यकताएं थीं जिन्हें पूरा करना चाहिए:

यह केवल HTML और CSS का उपयोग कर सकता है, जिसमें इंटरैक्शन (स्पष्ट रूप से) शामिल हैं ।
यह एक ही मेनू होना चाहिए , जिसमें दो अलग-अलग मेनू न हों और केवल एक ही प्रदर्शित हो।
यदि सीएसएस लोड करने में विफल रहता है, तो यह कम से कम कार्यात्मक होना चाहिए।

परियोजना में निम्नलिखित कदम हैं:

लिंक्स की सूची बनाएं।
बड़ी स्क्रीन पर लिंक की सूची को अच्छा बनाएं।
छोटे स्क्रीन पर लिंक की सूची को अच्छा बनाएं।
छोटे स्क्रीन पर लिंक्स की सूची को संक्षिप्त करने योग्य बनाएं।

एक मेनू, अंत में, नेविगेशन के लिए उपयोग किए जाने वाले लिंक की एक सूची है, इसलिए हम इसके साथ शुरू करते हैं:

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

सूची बनाना बड़ी स्क्रीन पर अच्छा दिखता है

यह हिस्सा सीधा है, थोड़े से सीएसएस के साथ हम सेट हैं। यह आपको तय करना है कि क्या अच्छा लगता है:

nav {
    background-color: SeaGreen;
    color: snow;
    display: flex;
    justify-content: space-between;
}
nav ul {
    /* Make the markers disappear */
    list-style-type: none;
}
nav ul li {
    /* Puts the elements in a single line */
    display: inline-flex;
    margin: 0.3em 1em;
}

संपूर्ण सीएसएस के लिए, लेख के अंत में दिए गए लिंक देखें।

छोटे परदे पर सूची बनाना अच्छा लगता है

मीडिया प्रश्नों का उपयोग करते हुए, हम निम्नलिखित नियमों को केवल छोटे संकल्पों तक सीमित रखते हैं। उदाहरण के लिए, यदि आप टेबलेट को "छोटे उपकरण" पर विचार करना चाहते हैं, तो आप उपयोग किए गए मान के साथ प्रयोग कर सकते हैं।

@media (max-width: 576px) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }
    /* Because we are in mobile mode, we want to display it as a
       vertical list */
    nav ul {
        display: block;
    }
    /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
    nav ul:last-child {
        width: 100%;
        flex-basis: 100%;
    }
    nav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding: 0.5em;
    }
}

      
                
                    
                    
       It IS a hamburger menu.

अंत में, दिलचस्प हिस्सा। सारा जादू यहाँ है: एक चेकबॉक्स दिया गया है, अगर यह चिह्नित नहीं है, तो आसन्न सूची प्रदर्शित नहीं होती है।

input[type='checkbox']:not(:checked)+ul {
    display: none;
}

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The hamburger menu -->
    <label for='menu' tabindex="0">
        
    </label>
    <input id='menu' type='checkbox' />
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

nav input[type='checkbox'], nav label {
    display: none;
}

/* Stlying the menu icon, the checkbox stays hidden */
nav label {
    text-align: right;
    display: block;
    padding: 0.5em;
    line-height: 1.6em;
    align-self: center;
}

      
                
                    
                    
       There is room for improvement by adding some animations.

क्या आप यह पोस्ट पसंद आया? मुझे मास्टोडॉन या ट्विटर पर बताएं !