본문 바로가기
HTML & CSS

1depth와 2depth 메뉴 만들기

07a 2022. 5. 16. 01:44

1뎁스와 2뎁스

1depth: 처음 보이는 메뉴 (상위)

2depth: 메뉴 안의 또 다른 메뉴 (하위)

 

 

*전체적인 구성

ul(전체 메뉴 묶음)>li(1뎁스)>a(1뎁스 메뉴명)

                                    >ul(2뎁스 메뉴)>li>a 

-position:relative(1뎁스) 와 absolute(2뎁스)로 top 위치를 조정해 아래에 배치

 

 

1)1뎁스 아래에 부분 2뎁스 구성 
1 CODE
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	/*reset*/
        *{margin: 0;padding: 0}
        ul,ol{list-style: none;}
        a{text-decoration: none;color:inherit}
        h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;}
        body{line-height: 1;}
        .cf::after{content: '';width: 0;height: 0;font-size: 0;display: block;clear: both;}
        .blind{display: none}
        fieldset{border: none}
        button{
            background-color:transparent;
            border:none;}
        img,input,button{vertical-align: middle;}/*인라인한줄수평중앙배치*/
        
        .gnb{width: 800px; margin:auto;/*background:#ccc;*/}
        .main-banner{height:550px; background:yellowgreen;}
        .main-banner h1{font-size: 50px; font-weight: bold; text-align:center;}
        .depth1{float:left; width:200px;position:relative;/*! 1.상위1뎁스 li를 기준점!*/}
        .depth1>a{display: block;height:70px;line-height: 70px; text-align: center; font-size: 20px; font-weight: bold;}
        .depth1:hover>.depth2{display:block; /* inline, table,flex...*/}
        .depth1:hover>a{color:#d68}/*전체블록에 올라갔을때 바뀌려면 이렇게, a호버때 바꾸려면 a에 스타일넣기*/
        .depth2{position:absolute;/*! 2.뎁스 따라가게 설정*/ top:70px;/*65도상관x,스타일에 맞게*/ left:0;
        background:#fff;border-top: 2px solid #000;width:200px;/*!width지정하려면 꼭주기 ,안주면 포지면앱솔루트돼서 넓이사라짐(포지션주면 콘텐츠맞게되기때문)*/
        display:none;/*! 3. 안보이게 설정(호버됐을때 보이게) */}
        .depth2 a{display:block; height:50px; line-height:50px; font-size:17px; color:#666; text-align:center;}
        .depth2 a:hover{color: red; text-decoration:underline; background:rgba(0,0,0,15);}/*a가 li랑 똑같은 크기여서 a에 줌, li에 줘도 됨*/
    </style>
</head>
<body>
    <div class="header">
        <ul class="gnb cf"><!--1뎁스-->
            <li class="depth1">
                <a href="#">회사소개</a>
                <ul class="depth2">
                    <li><a href="#">회사개요</a></li>
                    <li><a href="#">ceo인사말</a></li>
                    <li><a href="#">회사연혁</a></li>
                    <li><a href="#">특허인증현황</a></li>
                    <li><a href="#">찾아오시는 길</a></li>
                </ul>
            </li>
            <li class="depth1">
                <a href="#">제품소개</a>
                <ul class="depth2">
                    <li><a href="#">신제품</a></li>
                    <li><a href="#">선풍기</a></li>
                    <li><a href="#">여름가전</a></li>
                    <li><a href="#">겨울가전</a></li>
                    <li><a href="#">주방가전</a></li>
                    <li><a href="#">생활가전</a></li>
                    <li><a href="#">환경가전</a></li>
                </ul>
            </li>
            <li class="depth1">
                <a href="#">홍보센터</a>
                <ul class="depth2">
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">언론보도</a></li>
                    <li><a href="#">카탈로그</a></li>
                    <li><a href="#">홍보활동</a></li>
                </ul>
            </li>
            <li class="depth1">
                <a href="#">고객지원</a>
                <ul class="depth2">
                    <li><a href="#">자주묻는질문</a></li>
                    <li><a href="#">온라인문의</a></li>
                    <li><a href="#">서비스센터</a></li>
                    <li><a href="#">제품설명서</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="main-banner">
        <h1>메인이미지</h1>
    </div>
</body>
</html>

 

1 실행화면

 

 

2)1뎁스 아래에 전체 2뎁스 구성

*position:relative를 전체를 구성하는 gnb아래에 배치

2 CODE
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="down/css/reset.css">
    <style>
        .gnb{width: 1400px; margin:30px auto; height: 50px;position: relative;/*gnb기준으로 아래배치할거니까*/}
        .gnb .depth1{width: 200px; float: left; text-align:center;}
        .gnb .depth1>a{display: block;height: 50px; line-height: 50px; background:#202020; font-size: 20px; font-weight: bold;color:#fff;}
        .gnb .depth1:hover>.depth2{display: block;}
        .gnb .depth1:hover>a{background: orange;}


        /*gnb에 맞게 아래에 depth2 100%*/
        .gnb .depth2{position: absolute; left: 0;top:50px;width: 1400px; background:#d0d0d0;
        display: none;}
        .gnb .depth2>li{float: left;}
        .gnb .depth2>li>a{display:block;height: 150px; height: 40px;line-height: 40px;font-size: 17px;width: 150px;}
        .gnb .depth2>li>a:hover{background:#444;color:#fff;}

    </style>
</head>
<body>
    <ul class="gnb cf">
        <li class="depth1">
            <a href="#">HOME</a>
            <ul class="depth2">
                <li><a href="#">HOME01</a></li>
                <li><a href="#">HOME02</a></li>
                <li><a href="#">HOME03</a></li>
                <li><a href="#">HOME04</a></li>
                <li><a href="#">HOME05</a></li>
            </ul>
        </li>
        <li class="depth1">
            <a href="#">NEWS</a>
            <ul class="depth2">
                <li><a href="#">NEWS01</a></li>
                <li><a href="#">NEWS02</a></li>
                <li><a href="#">NEWS03</a></li>
                <li><a href="#">NEWS04</a></li>
                <li><a href="#">NEWS05</a></li>
            </ul>
        </li>
        <li class="depth1">
             <a href="#">PROJECTS</a>
             <ul class="depth2">
                <li><a href="#">PROJECTS01</a></li>
                <li><a href="#">PROJECTS02</a></li>
                <li><a href="#">PROJECTS03</a></li>
                <li><a href="#">PROJECTS04</a></li>
                <li><a href="#">PROJECTS05</a></li>
             </ul>
        </li>
        <li class="depth1">
            <a href="#">BLOG</a>
            <ul class="depth2">
                <li><a href="#">BLOG01</a></li>
                <li><a href="#">BLOG02</a></li>
                <li><a href="#">BLOG03</a></li>
                <li><a href="#">BLOG04</a></li>
                <li><a href="#">BLOG05</a></li>
             </ul>
        </li>
        <li class="depth1">
            <a href="#">CHAT</a>
            <ul class="depth2">
                <li><a href="#">CHAT01</a></li>
                <li><a href="#">CHAT02</a></li>
                <li><a href="#">CHAT03</a></li>
                <li><a href="#">CHAT04</a></li>
                <li><a href="#">CHAT05</a></li>
            </ul>
        </li>
        <li class="depth1">
            <a href="#">ABOUTUS</a>
            <ul class="depth2">
                <li><a href="#">ABOUTUS01</a></li>
                <li><a href="#">ABOUTUS02</a></li>
                <li><a href="#">ABOUTUS03</a></li>
                <li><a href="#">ABOUTUS04</a></li>
                <li><a href="#">ABOUTUS05</a></li>
            </ul>
        </li>
        <li class="depth1">
            <a href="#">CONTACT</a>
            <ul class="depth2">
                <li><a href="#">CONTACT01</a></li>
                <li><a href="#">CONTACT02</a></li>
                <li><a href="#">CONTACT03</a></li>
                <li><a href="#">CONTACT04</a></li>
                <li><a href="#">CONTACT05</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

 

2 실행화면

'HTML & CSS' 카테고리의 다른 글

이미지의 특정영역 누르면 이동하기(maschek.hu 이미지맵 사이트)  (0) 2022.05.16
메뉴에 hover시 글자 아래에 밑줄 생기기(transition)  (0) 2022.05.16
자식태그 호출 사용법 nth-child(n), nth-of-type(n)  (0) 2022.05.09
table 표 작성법  (0) 2022.05.09
배경 이미지 사용법  (0) 2022.05.06

'HTML & CSS' Related Articles

티스토리툴바