2강 - GSCBIO, 상단바

GCSBIO 사이트 상단바와 비슷한 원리의 상단바 구현

우선 [GCSBIO 사이트링크 ] 는 다음과 같다.(https://www.gcsbio.com/eng/main/main.asp)
링크를 통해 보면 GCSBIO 사이트의 상단바는 마우스를 호버시
2차메뉴가 아래로 나오는 형태이고, 1차 메뉴에 호버시 각각 움직이는 밑줄 효과가 따라온다.
이를 간단하게 메뉴바만 구현해보면
코드는 이렇다.

top_bar__sub<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<header class="top_bar">
    <div>
        <nav class="menu_1">
            <ul class="flex">
                <li><a href="#">BRANDS</a></li>
                <li><a href="#">About GCS</a></li>
                <li><a href="#">Innovation</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="top_bar__sub">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, natus facilis! In eaque ducimus tempora, pariatur dolore, at culpa harum ratione dolor id nulla, aut ad quasi inventore dolorem doloremque!
    </div>
</header>

<section>
    <img src="https://www.gcsbio.com/_upfiles/main/2021081812388_pc.png" alt="">
</section>

/* 폰트 */
@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family:"GmarketSansMedium";
}

/* lib */
.con {
    width: var(--site-width);
}

.con-min-width {
    min-width: var(--site-width);
}

/* custom */
:root {
    --site-width: 800px;
}

.top_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: white;
}

.top_bar:hover {
    background-color: white;
    color: #111;
    transition: background-color .3s, color .3s;
}

.menu_1 > ul > li > a {
    display: block;
    padding: 10px;
}

.top_bar__sub {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: red;
    height: 0;
    overflow: hidden;
    transition: height .2s 0s;
}

:hover > .top_bar__sub {
    height: 100px;
    transition: height .2s .2s;
}

코드펜으로 한번에 정리된 코드 보러가기