HTML14강 드랍메뉴 만들기(HTML코드 첨부)

HTML

HTML14강 드랍메뉴 만들기(HTML코드 첨부)

공부하고 기억하는 공간 2023. 8. 6. 21:02

728x90

SMALL

codePen의 화면이 너무 작다면 아래의 코드를 복사해서 Visual Studio에서 확인해보자.

아래의 코드중 드랍다운에서 가장 중요한 코드는 position이다.

🟰HTML로 만드는 드랍메뉴의 조건(자바스크립트를 쓰지 않고 만들기)

☀️ 숨길 메뉴의 상위 요소에 position : relative를 걸어 기준점을 만들어준다.
☀️숨길 메뉴의 요소에 position : absolute를 걸어 기준점에 대한 절대 위치를 지정해준다.
☀️ top, left, right, bottom을 통해 위치를 조정해준다.
☀️width, font-size등을 통해 세부 위치를 조정해준다.
☀️세부위치를 모두 조정했다면 숨길 요소에 display:none, visibility : hidden , opacity : 0등을 통해 요소를 숨긴다.
☀️상위 요소 :hover옵션시 하위 옵션에서 지정했던 none, hidden, 0등의 요소를 다시 원래 상태로 돌려준다.
☀️ 메뉴가 천천히 올라오도록 하고 싶다면 transition-duration을 통해 시간을 지정해주도록 한다.

See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mall_menu ar.html</title>
    <style>
        .sb{
            display: flex;
        }
        a{
            text-decoration: none;
            color: #353535;
        }
        ol,ul{
            display: none;
            padding-left: 0;
        }
        #tab{
            width: 100%;
            margin-top: 100px;
        }
        #tab > ul {
            justify-content: space-evenly;
            height: 60px;
            width: 100%;
            border: 1px solid rgb(0, 0, 0,.09);
            font-size: 13px;
            letter-spacing: -.25px;
            
        }
        #tab >ul >li{
            display: flex;
            position: relative;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            min-width: 180px;
        }
        #tab >ul >li:first-child{
            display: flex;
            position: relative;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            min-width: 70px;
        }
        a:hover{
            opacity: 0.7;
        }
        ul> li> ol {
            list-style: none;
        }
        ul> li:hover >ol {
            position: absolute;
            display: block;
            margin-top: 0;
            box-sizing: border-box;
            top: 40px;
            left: -2px;
            border: 1px solid rgb(0, 0, 0,.09);
            margin: 20px auto;
        }
        
        ul > li:hover > ol > li{
            width: 168px;
            padding: 10px;
            background-color: white;
            text-align: left;
            height: fit-content;
            overflow: hidden;
            
        }
        ul > li:hover > ol > li:hover{
           background-color: rgb(0, 0, 0,.05);
            cursor: pointer;
        }

        details ol{
            display: block;
            position: static;
            width: fit-content;
            height: fit-content;
            list-style: decimal;
            font-size: 1rem !important; /* !important : 상속및 선택자 상세도에 상관없이 무조건 적용*/
        }
    </style>
</head>
<body>
    <div id="tab">
        <ul class="sb">
            <li>🟰</li>
            <li><a href="#" style="color: rgb(225, 106, 146);">Rona  universe</a></li>
            <li>
                <a href="#">남성의류</a>
                <ol>
                    <li>아우터</li>
                    <li>탑</li>
                    <li>바텀</li>
                    <li>악세서리</li>
                </ol>
            </li>
            <li><a href="#">아우터</a></li>
            <li>
                <a href="#">탑</a>
                <ol>
                    <li>니트</li>
                    <li>셔츠</li>
                    <li>블라우스</li>
                    <li>후드,맨투맨</li>
                    <li>반팔T</li>
                    <li>긴팔T</li>
                </ol>
            </li>
            <li>
            <a href="#">드레스</a>
            <ol>
                <li>롱/미디</li>
                <li>미니</li>
            </ol>
        </li>
        <li>
            <a href="#">바텀</a>
            <ol>
                <li>팬츠</li>
                <li>스커트</li>
            </ol>
        </li>
        <li>
            <a href="#">악세서리</a>
            <ol>
                <li>ER</li>
                <li>NC</li>
                <li>BC</li>
                <li>Etc</li>
            </ol>
        </li>
    </ul>


</div>
</body>
</html>

728x90

SMALL