[반응형 웹] Youtube 02 #네비게이션 만들기

이전 내용에서 추가 :)

 

# 01

index.html 에 네비게이션 요소 추가

  <nav class="nav">
    <ul class="nav__wrapper">
        <li>
            <button class="nav__icon">&#9829;</button>\
            <button class="nav__menu">메뉴 항목</button>
        </li>
        <li>
            <button class="nav__icon">&#9829;</button>\
            <button class="nav__menu">메뉴 항목</button>
        </li>
        <li>
            <button class="nav__icon">&#9829;</button>\
            <button class="nav__menu">메뉴 항목</button>
        </li>
    </ul>
  </nav>

 

# 02

navigation.css

네비게이션 영역과 색상, 속성 지정

.nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

/* 네비게이션 영역 */
.nav__wrapper {
    min-width: 200px;
    min-height: 100vh;
    background-color: #f8f8f8;
    padding: 80px 0 0 0;
    list-style: none;
}

.nav__wrapper li {
    display: flex;
    padding: 10px 16px 10px;
}

/* 커서 올리면 색상이 변경되게 */
.nav__wrapper li:hover {
    background-color: #eaeaea;
}

두번째 메뉴항목에 커서 올려둘 경우 색상처리 된다.

# 03

하트 아이콘과 메뉴 항목 속성 변경

.nav__icon {
    border: none;
    background-color: transparent;
    font-size: 1.5rem;    
}
.nav__menu {
    margin: 0 0 0 8px;
    font-size: 1.2rem;
    border: none;
    background-color: transparent;
}

 

# 04

media 를 사용해 반응형으로 변경

800px 기준으로 메뉴항목을 안 보이게

600px 기준으로 네비게이션을 아예 안 보이게 속성 변경

@media screen and (max-width: 800px) {
    .nav__menu {
        display: none;
    }
    .nav__wrapper {
        min-width: 0;
    }
}

@media screen and (max-width: 600px) {
    .nav__wrapper {
        display: none;
    }
}