[CSS3] menu bar 만들기

Programming Language/Javascript, ...

[CSS3] menu bar 만들기

Ma_Sand 2022. 4. 13. 18:30

많은 사이트를 보면 메뉴에 마우스 커서를 갖다대면 해당 메뉴의 목록들이 뜬다.

목록을 작성할 땐 순서가 없는 목록 태그인 <ul> 태그를 사용한다.

<head>
    <style>
        div{  /*박스 사이즈를 테두리 박스까지로 설정*/
            box-sizing: border-box;
        }
        
        /*전체 틀 크기 지정*/
        #navigator{
            width: 1000px;
            height: 50px;
        }
        
        #navi{
            list-style-type: none; /*목록 앞에 붙는 기호들을 없앤다.*/
            margin: 0px;  /*margin과 padding 초기화*/
            padding: 0px;
            height: 100%;
        }
        
        #navi>li{
            float: left;  /*왼쪽 정렬*/
            height: 100%;
            text-align: center;  /*텍스트 가운데 정렬*/
            width: 19.8%;
        }
        
        #navi a{
            color: black;
            text-decoration: none;  /*a 태그로 인한 텍스트 밑줄 없애기*/
            font-size: 16px;
            font-weight: bold;
            width: 100%;
            height: 100%;
            display: block;  /*블록 형태로 보여주기(지정한 크기 만큼 보여줌)*/
            line-height: 43px;  /*줄 높이*/
        }
        #navi a:hover{  /*hover: 커서 갖다댔을 때*/
            font-size: 18px;
            color: rgb(168, 93, 238);
        }
        
        #navi>li>ul{
            list-style: none;
            display: none;  /*메뉴들의 해당 목록들을 보이지 않게 한다.*/
            padding: 0px;
        }
        #navi>li>ul a{
            font-size: 13px;
        }
        #navi>li>ul a:hover{  /*메뉴들의 해당 목록들에 커서를 갖다댔을 때*/
            font-size: 15px;
        }
        #navi>li>a:hover+ul{  /*메뉴에 커서를 갖다댔을 때 해당 목록들을 찾는다.*/
            display: block;  /*블록 형태로 보여준다.*/
        }
        #navi>li>ul:hover{  /*해당 목록들에 커서를 갖다댔을 때*/
            display: block;  /*블록 형태로 보여준다.*/
        }
    </style>
</head>

<body>
    <div id="navigator">
        <ul id="navi">
            <li><a href="#">추천</a></li>
            <li><a href="#">오늘의 특가</a></li>
            <li><a href="#">국내숙소</a>
                <ul>
                    <li><a href="#">모텔</a></li>
                    <li><a href="#">호텔</a></li>
                    <li><a href="#">펜션/풀빌라</a></li>
                    <li><a href="#">리조트</a></li>
                </ul>
            </li>
            <li>
                <a href="#">교통/항공</a>
                <ul>
                    <li><a href="#">고속버스</a></li>
                    <li><a href="#">KTX</a></li>
                    <li><a href="#">렌트카</a></li>
                    <li><a href="#">항공권</a></li>
                </ul>
            </li>

            <li>
                <a href="#">해외여행</a>
                <ul>
                    <li><a href="#">해외숙소</a></li>
                    <li><a href="#">해외 항공권</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>