เมื่อเร็ว ๆ นี้ ฉันได้ทำการแก้ไขเล็ก ๆ น้อย ๆ ในเว็บไซต์ของฉันเมื่อฉันค้นพบเมนูแฮมเบอร์เกอร์ที่ฉันทำขึ้นใหม่ มันไม่ได้พิเศษอะไรมาก แค่เป็นเมนู เมื่อคุณปรับความละเอียดให้เล็กลง มันจะบีบอัดตัวเองเป็นเมนูแนวตั้งที่ซ่อนอยู่ ซึ่งคุณสามารถแสดงหรือซ่อนได้โดยการกดปุ่ม ส่วนที่น่าสนใจคือสร้างโดยใช้ HTML และ CSS เท่านั้น

ฉันจำได้ว่าตอนที่ฉันสร้างนั้นฉันไม่พบตัวอย่างแบบเต็มเกี่ยวกับวิธีการทำสิ่งนี้ให้สำเร็จบนอินเทอร์เน็ต และนั่นหมายถึงการลองผิดลองถูกหลายครั้งเพื่อให้ได้ผลลัพธ์ที่ต้องการ ดังนั้นฉันจึงแตกโค้ดของเมนูและเปลี่ยนให้เป็นตัวอย่างที่ง่ายขึ้น

สิ่งที่จำเป็น

เมื่อฉันเริ่มโครงการนี้ ฉันมีข้อกำหนดบางประการที่ต้องทำให้สำเร็จ:

• สามารถใช้ HTML และ CSS เท่านั้น รวมถึงการโต้ตอบ(แน่นอน )
• ต้องเป็น เมนู เดียวกันไม่มี 2 เมนูที่แตกต่างกันและแสดงเพียงเมนูเดียว
• ในกรณีที่ไม่สามารถโหลด CSS อย่างน้อยก็ควรทำงานได้

โครงการมีขั้นตอนดังนี้

1. ทำรายการลิงค์
2. ทำให้รายการลิงก์ดูดีบนหน้าจอขนาดใหญ่
3. ทำให้รายการลิงก์ดูดีบนหน้าจอขนาดเล็ก
4. ทำให้รายการลิงก์บนหน้าจอขนาดเล็กสามารถยุบได้

ในตอนท้ายเมนูคือรายการลิงก์ที่ใช้สำหรับการนำทาง ดังนั้นเราจะเริ่มต้นด้วย:

<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>

ทำให้รายการดูดีบนหน้าจอขนาดใหญ่

ส่วนนี้ตรงไปตรงมาโดยมี CSS เล็กน้อยที่เราตั้งค่าไว้ มันขึ้นอยู่กับคุณที่จะตัดสินใจว่าอะไรที่ดูดี:

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;
    }
}

      
                

                    
                    
                
            

ในที่สุดส่วนที่น่าสนใจ ความมหัศจรรย์ทั้งหมดอยู่ที่นี่: ให้ช่องทำเครื่องหมาย หากไม่ได้ทำเครื่องหมายไว้ รายการที่อยู่ติดกันจะไม่แสดง

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;
}

      
                

                    
                    
                
            

คุณชอบโพสต์นี้หรือไม่? แจ้งให้เราทราบทางMastodonหรือTwitter !