순수 HTML/CSS로 된 애니메이션 측면 탐색

반응형

안녕, 동료 크리에이터들

웹 사이트에 애니메이션 사이드 네비게이션을 추가하시겠습니까? 순수 HTML로 하는 방법은 다음과 같습니다.

비디오 버전을 보고 싶으시다면 바로 여기 있습니다.

1. 기본 파일.

 

일반적인 HTML "헤드" 태그로 시작하고 지금은 빈 본문으로 시작하십시오.

CSS 파일의 경우, 간단한 재설정으로 시작하여 본문 배경에 어두운 색을 선택합니다.

*, ::before, ::after{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
}

body {
      background: #222;
      font-family: Raleway, Helvetica, sans-serif;
      position: relative;
}

2. HTML로 탐색을 만듭니다.

용기와 점 세 개가 있는 래퍼가 포함된 네비게이션을 만듭니다.

 

<nav class="side-nav">
        <div class="wrapper">
                  <div class="three-dots-container">
                              <div class="dot d1"></div>
          <div class="dot d2"></div>
          <div class="dot d3"></div>
        </div>
      </div>
</nav>

그 아래에 SVG 아이콘이 있는 탐색 bloc을 추가합니다.

<nav class="side-nav">
        <div class="wrapper">
                  <div class="three-dots-container">
                              <div class="dot d1"></div>
          <div class="dot d2"></div>
          <div class="dot d3"></div>
        </div>
                <div class="nav-bloc">
                            <svg
            aria-hidden="true"
            focusable="false"
            data-prefix="far"
            data-icon="file"
            class="svg-inline--fa fa-file fa-w-12"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 384 512"
          >
                          <path
              d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"
            ></path>
          </svg>
                </div>
      </div>
</nav>

그 블록 안과 SVG 아래에 모든 링크를 포함한 하위 해군을 추가한다:

<div class="nav-bloc">
          ...
        <div class="sub-nav">
                      <h2>Subtitle 1</h2>
            <ul>
                                      <li>
                                        <a href="#">Link</a>
              </li>
              <li>
                                                          <a href="#">Link</a>
              </li>
              <li>
                                                                            <a href="#">Link</a>
              </li>
              <li>
                                                                                              <a href="#">Link</a>
              </li>
              <li>
                                                                                                                <a href="#">Link</a>
              </li>
              <li>
                                                                                                                                  <a href="#">Link</a>
              </li>
            </ul>
     </div>
</div>

 

3. 네비게이션 스타일링을 하세요.

SVG 파일이 더 이상 전체 페이지를 차지하지 않도록 너비를 추가하는 것부터 시작합니다.

svg {
      width: 20px;
}

고정된 위치로 화면 왼쪽에 배치하여 사이드 네비게이션 스타일을 설정해 보겠습니다.

.side-nav {
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
}

 

그런 다음 래퍼의 배경을 밝게 하고 뷰포트만큼 높이 만듭니다.

.wrapper {
    background: #333;
    height: 100vh;
    width: 75px;
}

점 컨테이너와 점 자체를 스타일링하여 탐색 막대의 상단에 세 가지 색상의 점이 생기도록 합니다.

.three-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.dot {
    flex-shrink: 0;
    margin: 10px 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
      background: #000;
}

.d1 {background: crimson;}
.d2 {background: yellow;}
.d3 {background: lightgreen;}

그런 다음 탐색기 내부의 각 블록에 대한 설계(현재로서는 블록이 하나뿐이지만)를 만들고 마우스를 움직이면 다음과 같은 효과를 얻을 수 있습니다.

 

.nav-bloc {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f21e;
}

.nav-bloc:hover {
    background: rgb(24, 24, 24);
}

4. 왼쪽에서 네비게이션이 미끄러지도록 애니메이션을 만듭니다.

하위 탐색 스타일 지정:

.sub-nav {
    padding: 0px;
    width: 200px;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: #333;
    z-index: -1;
    color: white;
    /* Hidden at the left side */
    transform: translateX(-100%);
                            transition: transform 0.2s ease-in-out;
                            border-right: 2px solid #000;
                            border-left: 2px solid #000;
                          }

이제 아이콘을 마우스로 가리키면 하위 탐색기가 오른쪽으로 이동하게 됩니다. 그렇게 하려면:

 

.nav-bloc:hover .sub-nav {
    transform: translateX(75px);
}

(75제곱은 포장지의 너비입니다)

이것이 작동하는 방법입니다. 네비게이션 블록의 하위 항목인 하위 탐색기는 새로운 스택 컨텍스트(z-index: -1)를 가집니다. 즉, 스택 컨텍스트가 있는 가장 오래된 요소를 참조하려고 합니다. 이는 고정된 위치(새로운 스택 컨텍스트를 작성하기도 함).

따라서, 서브 네비게이션은 사이드 네비게이션을 의미할 것이고, 이것은 그것이 Nav-bloc과 포장지 뒤로 간다는 것을 의미합니다.

5. 아이콘을 스타일링합니다.

 

다음 코드를 바꿉니다.

svg{
      width: 20px;
}

사용:

.nav-bloc svg {
    width: 25px;
    fill: #f2f2f2;
    transition: fill 0.2s ease-in-out ;
}

.nav-bloc:hover svg {
    fill: #50bddf;
}

6. 내비게이션 내부를 스타일링합니다.

 

네비게이션 제목 및 링크 스타일 지정:

.sub-nav h2 {
    font-family: open sans, sans-serif;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222;
}
.sub-nav ul {
    list-style-type: none;
}
.sub-nav li {
    padding: 15px 20px;
}
.sub-nav li:hover {
    background: rgba(160, 160, 160, 0.555);
}
.sub-nav li a {
     color: #f2f2f2;
     text-decoration: none;
}

이제 탐색을 위한 다른 블록을 만들 수 있습니다! 소스 코드를 확인하여 여러 블록과 그 옆에 일부 콘텐츠가 있는 이 네비게이션의 모양을 확인하십시오.

오셔서 제 유튜브 채널을 보세요: https://www.youtube.com/c/Learntocreate/videos

곧 만나요!

 

엔조.