사이드 메뉴바 만들기

transition

• 지연 효과, CSS 속성을 변경할 때 애니메이션 속도를 조절한다
• 오늘은 이 효과를 사용하여 옆에서 나오는 사이드 메뉴를 만들어 보자

  • 입력방식 : transition : width 2s, opacity 2s;
    - s : 초 단위

---

1. 토글을 만들어 주자

• 커스텀을 위한 클래스도 같이 만든다

<div class="side-bar">
    <div class="icon">
        <div>▼</div>
        <div>▶</div>
    </div>
</div>

2. 왼쪽에 메뉴 영역 만들기

• 마우스 오버 시 토글 모양도 추가로 바뀌게 해주자

.side-bar{                               // 사이드 바 영역 왼쪽으로 밀어넣기
    background-color: lightgray;
    position: absolute;
    top:0;
    left:-260px;
    width: 300px;
    height: 100%;
}

.side-bar:hover{                        // 호버 시 검은색 배경
    left:0%;
    background-color:black;
}
.side-bar>.icon>div{                    // 토글 기본색 설정
    text-align:right;
    padding: 10px;
    color: black;
}
.side-bar:hover>.icon>div:last-child{   // 호버 시 토글 색 바꿔주기
    display:block;
    color: white;
}

.side-bar:hover>.icon>div:first-child{  // 호버시 첫 번째 토글 숨기기
    display:none;
}
.side-bar>.icon>div:last-child{         // 두번째 호버 숨기기
    display:none;
}

3. transition 넣어주기

• 메뉴가 나오고 들어갈때 부드럽게 연출하기

.side-bar{
    background-color: lightgray;
    position: absolute;
    top:0;
    left:-260px;
    width: 300px;
    height: 100%;
    transition: left 1s, background-color 3s;    //메뉴가 1초 동안 들어가고 3초 동안 색 천천히 바뀌기
}

.side-bar:hover{
    left:0%;
    background-color:black;
    transition: left 3s, background-color 3s;   // 메뉴가 3초 동안 나오고 3초 동안 색 천천히 바뀌기
}
.side-bar>.icon>div{
    text-align:right;
    padding: 10px;
    color: black;
}
.side-bar:hover>.icon>div:last-child{
    display:block;
    color: white;
}

.side-bar:hover>.icon>div:first-child{
    display:none;
}
.side-bar>.icon>div:last-child{
    display:none;
}

4. 3차 메뉴 추가하기

• 메뉴 영역에 3차 메뉴를 추가하자
  • 메뉴는 side-bar 클래스를 가진 div 영역 안에 넣어 주어야 한다

html --!

<div class="side-bar">
    <div class="icon">
        <div>▼</div>
        <div>▶</div>
    </div>
<nav class="menu">
    <ul>
        <li><a href="#">1차 메뉴아이템 1</a></li>
        <li><a href="#">1차 메뉴아이템 2</a></li>
        <li><a href="#">1차 메뉴아이템 3</a></li>...

css --!

/* 메뉴 부분 추가*/

.side-bar>.menu ul>li{
    position:relative;
}
.side-bar>.menu ul>li>a{
    display:block;
    font-weight:bold;
    padding:10px;
    white-space:nowrap;
}
.side-bar>.menu ul>li:hover>a{
    background-color:white;
    color:black;
}

.side-bar>.menu ul>li>a:not(:only-child)::after{   
                                   //자식을 하나만 가진 부모 외의 코드값 맨 뒤에 아래 속성을 추가한다
                                   > 즉 하위 메뉴가 없는 부모 제외한다
    content:"[+]";                 // 마지막 메뉴에 [+]가 보이게 한다
}

.side-bar>.menu  ul>li:hover>a:not(:only-child)::after{
    content:"[-]";                // 각 마지막 메뉴 호버 시[+]가 [-]로 바뀌게 한다
}
.side-bar>.menu ul ul{
    display:none;
    position:absolute;
    top:0;
    left : 100%;
    border: 2px solid red;
    background-color : black;
    width:100%;
}
.side-bar>.menu ul>li:hover>ul{
    display:block;
}

5. 사이드바 화면 고정 시키기

• 테스트 중 한 가지 문제가 생겼다... 밑으로 내리는데 메뉴가 끊기는 것이다

  html emmet 코드 : div.con>lorem*10

  • 더미 텍스트 10개 생성

• 이때는 css의 sidebar 최상위 클래스의 position을 fixed로 바꿔주면 항상 화면에 고정시켜준다

.side-bar{                               // 최상위 class
    background-color: lightgray;
    position: fixed;                     // absolute의 속성을 가지면서 화면에 고정시키겠다
    top:0;
    left:-260px;
    width: 300px;
    height: 100%;
}

---

Today Comment :
transition을 배운 순간 머릿속에 상상력을 자극했다

이 기능만으로도 멋있는 디자인이 나올 거 같은 설렘을 느꼈다
하지만 역시 쉽지는 않았다

• transition 위치잡기, 속성과 hover에 동시에 넣어주기
• after와 before의 영역위치 찾고 활용하기
• child의 응용하여 메뉴 영역위치 잡고 속성 넣기
• 3차 메뉴 만들고 추가하기 등등

오늘 진행하면서 내가 어려워하는 부분을 확실히 알 수 있었다

영역을 잡거나 찾아갈때 혼동하지말고 항상 주의하자