HMTL & CSS

2단 배열 메뉴

동띠기 2020. 8. 21. 17:53
728x90

1단 메뉴에 이어서 2단 메뉴를 만들어보자. 만들어 볼 UI는 아래 사진과 같다.

 

 

우선 스스로 짠 코드 부터 !

 

html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>2단 배열 메뉴</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="10. 0820-nav-2dan.css">
</head>
<body>
    <!-- 전체영역 -->
    <div class="wrap">
        <!-- 헤더 -->
        <header class="header">
            <!-- 메뉴 전체 -->
            <nav class="menu-wrap">
                <!-- 1차 메뉴 -->
                <ul class="menu">
                    <li class="menu-list active">
                        <a href="#none" class="menu-link">웹툰</a>
                        <!-- 2차메뉴 -->
                        <ul class="sub-menu active">
                            <li class="sub-list">
                                <a href="#none" class="sub-link">요일별</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">장르별</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">작가별</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">연도별</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">작품별</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-list">
                        <a href="#none" class="menu-link">블로그</a>
                        <!-- 2차메뉴 -->
                        <ul class="sub-menu">
                            <li class="sub-list active">
                                <a href="#none" class="sub-link">단체 블로그</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">개인 블로그</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-list">
                        <a href="#none" class="menu-link">지식백과</a>
                        <!-- 2차메뉴 -->
                        <ul class="sub-menu">
                            <li class="sub-list active">
                                <a href="#none" class="sub-link">건강백과</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">밀리터리백과</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">음식백과</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">동물백과</a>
                            </li>
                            <li class="sub-list">
                                <a href="#none" class="sub-link">00백과</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-list">
                        <a href="#none" class="menu-link">카페</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

 

css

 

@charset "utf-8";

@font-face{
    font-family: 'Noto-Sans-R';
    src: url(../font/NotoSansKR-Regular.otf) format('OpenType');
}
@font-face{
    font-family: 'Noto-Sans-L';
    src: url(../font/NotoSansKR-Light.otf) format('OpenType');
}
body{
    font-family: Noto-Sans-L;
}

.wrap{
    max-width: 700px;
    min-width: 500px;
    margin: 20px auto;
}
.header{
    height: 100px;
}
.menu-wrap{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.menu{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #ddd;
}
.menu-list{
    display: table-cell;
    height: 50px;
    line-height: 50px;
}
.menu-link{
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 20px;
}
.menu-list.active .menu-link{
    font-weight: bold;
    font-size: 20px;
    color: green;
}
.menu-link:hover{
    font-weight: bold;
    font-size: 20px;
    color: green;
}
.sub-menu{
    display: none;
    height: 50px;
}
.menu-list.active .sub-menu{
    display: table;
    table-layout: fixed;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ddd;
}
.sub-list{
    display: table-cell;
}
.sub-link{
    font-size: 17px;
    color: #333;
    text-decoration: none;
}

.sub-list.active .sub-link{
    font-size: 17px;
    font-weight: bold;
    color: green;
    padding-bottom: 10px;
    border-bottom: 2px solid green;
}

.sub-link:hover{
    font-size: 17px;
    font-weight: bold;
    color: green;
    padding-bottom: 10px;
    border-bottom: 2px solid green;
}

 

결과물

 

 

당연히 table / table-cell 을 사용할 것이라고 생각하였으나 부스트코스의 코드는 inline-block로 작성되었다.

그래도 조금만 고치면 사용할 수 있으니 틀린 코드라고는 하지 않아야지 ,

 

그럼 부스트코스의 코드를 보자

 

html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>2단 배열 메뉴</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="10. 0820-nav-2dan.css">
</head>
<body>

    <!-- 메뉴 전체 -->
    <nav class="menu-wrap">
        <!-- 1차 메뉴 -->
        <ul class="menu">
            <li class="menu-list active">
                <a href="#none" class="menu-link">웹툰</a>
                <ul class="sub-menu">
                    <li class="sub-list active">
                        <a href="" class="sub-link"><span>요일별</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>장르별</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>작가별</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>연도별</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>작품별</span></a>
                    </li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="#none" class="menu-link">블로그</a>
            </li>
            <li class="menu-list">
                <a href="#none" class="menu-link">지식백과</a>
                <ul class="sub-menu">
                    <li class="sub-list active">
                        <a href="" class="sub-link"><span>건강백과</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>동물백과</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>밀리터리</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>음식백과</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>곤충백과</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>인물백과</span></a>
                    </li>
                    <li class="sub-list">
                        <a href="" class="sub-link"><span>조류백과</span></a>
                    </li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="#none" class="menu-link">카페</a>
            </li>
        </ul>
    </nav>
</body>
</html>

 

css

 

@charset "utf-8";

@font-face{
    font-family: 'Noto-Sans-R';
    src: url(../font/NotoSansKR-Regular.otf) format('OpenType');
}
@font-face{
    font-family: 'Noto-Sans-L';
    src: url(../font/NotoSansKR-Light.otf) format('OpenType');
}
body{
    font-family: Noto-Sans-L;
}

.menu{
    width: 700px;
    margin: 20px auto 0;
    text-align: center;
}
.menu-list{
    display: inline-block;
}
.menu-link{
    display: block;
    padding: 13px 20px;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: #444;
    text-decoration: none;
}
.menu-list:hover .menu-link,
.menu-list.active .menu-link{
    color: green;
}
.menu-list.active .sub-menu{
    display: block;
}
.sub-menu{
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    min-width: 700px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.sub-list{
    display: inline-block;
}
.sub-link{
    display: block;
    padding: 15px 35px;
    font-size: 17px;
    line-height: 20px;
    color: #333;
    text-decoration: none;
}

.sub-list:hover .sub-link,
.sub-list.active .sub-link{
    font-weight: bold;
    color: green;
}

.sub-link span{
    position: relative;
}
.sub-list:hover span::after,
.sub-list.active span::after{
    position: absolute;
    content: '';
    right: 0;
    bottom: -15px;
    left: 0;
    border-bottom: 2px solid green;
}

 

결과물

 

 

 

 

내가 만든 것과 약간은 다르게 나온다. 2차 아래 메뉴의 border-bottom 주는 방법도 다르고.. 부스트코스는 after을 사용하여 작성 , 나는 그냥 padding으로 밀었다.

 

이런 기초가 다져져야 조금 더 고차원 적인 (?) / 일반적인 드롭다운 메뉴를 만들 수 있다. 물론 지금도 만들 수 있지만...

다른 사람들이 짜는 코드, 어떤 방식이 효율적인 것인지 조금더 공부해야겠다 .

 

 

 

 

 

* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.

728x90

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

썸네일 이미지 목록 - 2  (0) 2020.08.24
썸네일 이미지 목록  (0) 2020.08.22
탭(Tab) 레이아웃 만들기  (0) 2020.08.20
기본 메뉴바 만들기  (0) 2020.08.19
fixed layout / 따라오는 메뉴  (0) 2020.08.19

'HMTL & CSS'의 다른글

  • 현재글2단 배열 메뉴

관련글

댓글

티스토리툴바