아래 헤더 컴포넌트가 있습니다.
HeaderComponent.js 파일
function HeaderComponent(){
return (
<header>
<div className="header-logo-div">
logo or title
</div>
<div className="menu-list">
<ol>
<li>Product Store</li>
<li>Our Story</li>
<li>Store</li>
<li>Instar</li>
</ol>
</div>
</header>
)
}
export default HeaderComponent;
아래 HEADER CSS 코드입니다.
header{
margin: 40px 80px;
display: flex;
}
.header-logo-div{
background-color: rgb(34, 152, 152);
}
.menu-list{
margin-right: 0;
margin-left: auto;
}
.menu-list ol{
list-style: none;
float: left;
}
.menu-list li{
float: left;
margin: 0 35px;
}
.menu-list li::after{
content: "";
display: block;
border-bottom: 2px black;
transition: width 250ms ease-out;
left: auto;
right: 0;
width: 0;
height: 2px;
}
.menu-list li:hover::after{
right: auto;
left: 0;
width: 100%;
background-color: rebeccapurple;
}
여기서 ::after는 지정된 요소에 content : “” 의 요소 추가로 붙습니다.
추가된 요소(element) block 요소를 지정해주면 ol 밑으로 들어간다. (block이기 때문에)
Width : 0 이고 hover 이면 100%를 주고 애니메이션까지 지정해주어
부드럽게 펴지도록 만들어줍니다.
전체적인 디자인은 아직 작성 중 입니다.
마우스 올릴 때 애니메이션도 동작합니다
GIF는 추후에 추가하도록 하겠습니다.