메뉴만들기

imjingu·2023년 7월 10일
개발공부

목록 보기
82/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .nav { /* 전체 세로 메뉴를 포함하는 ul의 넓이 */
            overflow: hidden; 
        }

        .nav li { /* 메인메뉴, 서브메뉴 */
            font-size: 14px; background-color: #000000; text-align: center; font-weight: 900; font-family: Tahoma;
            border-bottom: 1px solid #808080; line-height: 40px; box-sizing: border-box;
            color: white;
            cursor: pointer;
            width: 200px;
            float: left;
        }

        .submenu li { /* 서브메뉴 항목 */
            font-size: 12px; background-color: #999999; border-bottom: 1px solid #777777;
        }

        .submenu li a {
            color: black;
        }

        .submenu {
            height: 0; /* 높이를 0으로 지정한 이유는 서브메뉴는 마우스 반응이 있기 전에는 보이면 안됨 */
            overflow: hidden; /* 높이만큼 보여짐 */
            transition-duration: 0.5s; /* 자연스럽게 0.5초만큼 동작함 */
        }

        .nav li:hover .submenu { /* 메인메뉴 li에 마우스를 올리면 서브 메뉴 항목의 높이를 160px로 보여지게 함 */
            height: 160px;
        }

        .nav li:nth-child(2):hover .submenu { /* 메인메뉴2번째 li에 마우스를 올리면 서브메뉴 항목의 높이를 200px로 보여지게함 */
            height: 200px;
        }

        .nav li:hover { /* 메인메뉴 항목에 마우스를 올렸을 때 글자색상 */
            color: red;
        }

        .submenu li:hover { /* 서브메뉴에 마우스를 올렸을때 배경색상 */
            background-color: orange;
        }

        .submenu li:hover a { /* 서브메뉴에 마우스를 올렸을때 글자색상 */
            color: yellow;
        }
        
    </style>
</head>
<body>
    <!--전체 메인 메뉴-->
    <ul class="nav">
        <li>MENU-1<!--서브 메뉴1-->
            <ul class="submenu">
                <li><a href="#">menu1-1</a></li>
                <li><a href="#">menu1-2</a></li>
                <li><a href="#">menu1-3</a></li>
                <li><a href="#">menu1-4</a></li>
            </ul>
        </li>

        <li>MENU-2<!--서브 메뉴2-->
            <ul class="submenu">
                <li><a href="#">menu2-1</a></li>
                <li><a href="#">menu2-2</a></li>
                <li><a href="#">menu2-3</a></li>
                <li><a href="#">menu2-4</a></li>
                <li><a href="#">menu2-5</a></li>
            </ul>
        </li>

        <li>MENU-3<!--서브 메뉴3-->
            <ul class="submenu">
                <li><a href="#">menu3-1</a></li>
                <li><a href="#">menu3-2</a></li>
                <li><a href="#">menu3-3</a></li>
                <li><a href="#">menu3-4</a></li>
            </ul>
        </li>

        <li>MENU-4<!--서브 메뉴4-->
            <ul class="submenu">
                <li><a href="#">menu4-1</a></li>
                <li><a href="#">menu4-2</a></li>
                <li><a href="#">menu4-3</a></li>
                <li><a href="#">menu4-4</a></li>
            </ul>
        </li>

        <li>MENU-5<!--서브 메뉴5-->
            <ul class="submenu">
                <li><a href="#">menu5-1</a></li>
                <li><a href="#">menu5-2</a></li>
                <li><a href="#">menu5-3</a></li>
                <li><a href="#">menu5-4</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
imjingu
이전 포스트
transition

다음 포스트
메뉴만들기

개발공부

transition

애니메이션 속성

0개의 댓글
