CodePen Embed - Youtube (Left)

  <div id="wrapper">
    
    <nav id="left_nav">
      <div id="left_content"> <!-- 스크롤 발생 크기를 고려하여 nav와 크기값을 다르게 준 것 -->
        
        <div class="nav_section">
          <div class="nav_body">
            <ul>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_1"></i>
                  <span>홈</span>  
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_2"></i>
                  <span>탐색</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_3"></i>
                  <span>구독</span> 
                </a>
              </li>
            </ul>
          </div>
          
        </div>

        <div class="nav_section">
          <div class="nav_body">
            <ul>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_4"></i>
                  <span>보관함</span>  
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_5"></i>
                  <span>시청기록</span> 
                </a>
              </li>
            </ul>
          </div>
          
        </div>

        <div class="nav_section">
          <div class="nav_body">
            <div class="txt_wrap">
              <p>로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수 있습니다.</p>
              <a href="#" class="btn_login">로그인</a>
            </div>
          </div>
        </div>

        <div class="nav_section">

          <div class="nav_title_wrap">
            <h2>인기 YOUTUBE</h2>
          </div>

          <div class="nav_body">
            <ul>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_6"></i>
                  <span>음악</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_7"></i>
                  <span>스포츠</span>  
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_8"></i>
                  <span>게임</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_9"></i>
                  <span>영화</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_10"></i>
                  <span>뉴스</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_11"></i>
                  <span>실시간</span>  
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_12"></i>
                  <span>학습</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_13"></i>
                  <span>360° 동영상</span> 
                </a>
              </li>
            </ul>
          </div>
          
        </div>

        <div class="nav_section">
          <div class="nav_body">
            <ul>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_14"></i>
                  <span>채널 탐색</span>  
                </a>
              </li>
            </ul>
          </div>
          
        </div>

        <div class="nav_section">

          <div class="nav_title_wrap">
            <h2>인기 YOUTUBE</h2>
          </div>

          <div class="nav_body">
            <ul>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_15"></i>
                  <span>음악</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_16"></i>
                  <span>스포츠</span>  
                </a>
              </li>           
            </ul>
          </div>
          
        </div>

        <div class="nav_section">

          <div class="nav_body">
            <ul>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_17"></i>
                  <span>설정</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_18"></i>
                  <span>신고기록</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_19"></i>
                  <span>고객센터</span> 
                </a>
              </li>
              <li>
                <a href="#" class="flex_align_start">
                  <i class="icon icon_20"></i>
                  <span>의견 보내기</span> 
                </a>
              </li>
            </ul>
          </div>
          
        </div>


        <footer id="nav_footer">
          <div class="txt_wrap">
            <a href="#">정보</a>
            <a href="#">보도자료</a>
            <a href="#">저작권</a>
            <a href="#">문의하기</a>
            <a href="#">크리에이터</a>
            <a href="#">광고</a>
            <a href="#">개발자</a>
          </div>

          <div class="txt_wrap txt_wrap_block">
            <a href="#">약관</a>
            <a href="#">개인정보처리방침</a>
            <a href="#">정책 및 안전</a>
            <a href="#">YouTube 작동의 원리</a>
            <a href="#">새로운 기능 테스트하기</a>
          </div>
          <div class="txt_wrap">
            <p>
              © 2021<br>
              CEO: *** ****<br>
              주소: California, USA.<br>
              전화: 000-000-0000<br>
            </p>
          </div>
        </footer>


      </div>
    
    </nav>

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #212121;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
}

button {
  background-color: transparent;
  border: none;
}

input {
  outline: none;
  border: none;
}

input:focus {
  outline: none;
}



#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1320px;
}

.flex_align_between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.flex_align_start {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.flex_align_end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}




/* main - left */ 

#left_nav {
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;

  width: 240px;

  top: 56px;
  bottom: 0;
  left: 0;
  background-color: #212121;
}

#left_content {
  position: absolute;
  width: 225px;
  height: 100%;
}

#left_content .nav_section {
  padding: 8px 0;
  border-bottom: solid 1px rgba(255, 255, 255, .1);
}

#left_content .nav_section .nav_title_wrap {
  padding: 8px 24px;
}

#left_content .nav_section .nav_title_wrap h2 {
  color: #aaaaaa;
  font-size: 15px;
  font-weight: bolder;
}

#left_content .nav_section .nav_body li a {
  height: 40px;
  padding: 0 24px;
}

#left_content .nav_section .nav_body li .icon {
  display: inline-block;
  width: 24px;  
  height: 24px;
  background-color: #fff;

  margin-right: 24px;
}

#left_content .nav_section .nav_body li span {
  font-size: 13px;
  color: #fff;
}

#left_content .nav_section .nav_body .txt_wrap {
  padding: 24px;
}

#left_content .nav_section .nav_body .txt_wrap p {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
}

#left_content .nav_section .nav_body .btn_login {
  display: inline-block;

  border: solid 1px #3ea6ff;
    padding: 10px 12px 8px;
    font-size: 14px;
    color: #3ea6ff;

    margin-top: 12px;
}

#left_content #nav_footer {
  padding-bottom: 16px;
}

#left_content #nav_footer .txt_wrap {
  padding: 12px 24px 0;
}

#left_content #nav_footer .txt_wrap a {
  margin-right: 8px;

  color: #aaaaaa;
  font-size: 12px;
  font-weight: 500;

  word-break: keep-all;
}

#left_content #nav_footer .txt_wrap p {
  color: #717171;
  font-size: 12px;
  font-weight: 400;
}

#left_content #nav_footer .txt_wrap.txt_wrap_block a {
  display: inline-block;
}

This Pen is owned by naheeyu on CodePen.

See more by @naheeyu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.