최근에 나는 내 사이트를 약간 수정하다가 내가 만든 햄버거 메뉴를 재발견했습니다. 그다지 특별하지 않은 메뉴로, 작은 해상도로 들어가면 숨겨진 수직 메뉴로 압축되어 버튼을 눌러 표시하거나 숨길 수 있습니다. 흥미로운 부분은 HTML과 CSS만을 사용하여 만들었다는 것입니다.

그것을 만들 때 이것을 달성하는 방법에 대한 완전한 예를 인터넷에서 찾을 수 없었고 원하는 결과를 얻기 위해 많은 시행착오를 겪었던 것을 기억합니다. 그래서 메뉴의 코드를 추출하여 간단한 예제로 만들어 보았습니다.

요건

이 프로젝트를 시작했을 때 충족해야 할 몇 가지 요구 사항이 있었습니다.

• 상호 작용을 포함하여 HTML 및 CSS 만 사용할 수 있습니다 (분명히) .
• 두 개의 다른 메뉴가 없고 하나만 표시되는 동일한 메뉴 여야 합니다 .
• 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;
}

      
                

                    
                    
                
            

이 게시물이 마음에 드셨나요? 마스토돈 이나 트위터 로 알려주세요 !