홈페이지에 들어가면 다양한 메뉴를 보여주는 네비게이션바가 있습니다.
위와 같이 너무 많은 메뉴가 있을 경우에는 아래쪽의 리스트들은 접었다가 폈다하는 롤오버기능을 통해 사이트의 공간을 효율적으로 사용할 수 있습니다.
저는 3가지 정도의 유형에 대해서 css만사용해서 코딩을 해보겠습니다.
기본 세팅
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>기본세팅</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
#gnb {
width: 100%;
background: #eef1ff;
}
#gnb > ul{
margin:0 auto;
width:1000px;
display:flex;
justify-content:space-between;
}
#gnb > ul > li > a{
display:block;
width:200px;
background:#D2DAFF;
text-align: center;
line-height: 50px;
}
#gnb .snb {
width:100%;
height:200px;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #AAC4FF;
}
</style>
</head>
<body>
<nav id="gnb">
<ul>
<li>
<a href="#">리스트1</a>
<ul class="snb">
<li>안쪽리스트1</li>
<li>안쪽리스트2</li>
<li>안쪽리스트3</li>
</ul>
</li>
<li>
<a href="#">리스트2</a>
<ul class="snb">
<li>안쪽리스트1</li>
<li>안쪽리스트2</li>
<li>안쪽리스트3</li>
</ul>
</li>
<li>
<a href="#">리스트3</a>
<ul class="snb">
<li>안쪽리스트1</li>
<li>안쪽리스트2</li>
<li>안쪽리스트3</li>
</ul>
</li>
<li>
<a href="#">리스트4</a>
<ul class="snb">
<li>안쪽리스트1</li>
<li>안쪽리스트2</li>
<li>안쪽리스트3</li>
</ul>
</li>
<li>
<a href="#">리스트5</a>
<ul class="snb">
<li>안쪽리스트1</li>
<li>안쪽리스트2</li>
<li>안쪽리스트3</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>먼저 예시로 보여준 네비게이션바의 기본 소스코드입니다. 여기서 소스코드를 추가해서 다양한 유형의 롤오버 기능을 완성 시켜보겠습니다.
1. gnb전체가 내려오기
#gnb {
width: 100%;
background: #eef1ff;
height:50px;
overflow:hidden;
transition:0.5s;
}
#gnb:hover{
height:200px;
}overflow:hidden을 통해서 아래의 메뉴들을 감춰주고 gnb에 hover했을시 높이를 주어서 롤오버기능을 완성시켰습니다.
2. 하나씩 내려오기
#gnb .snb {
width:100%;
height:200px;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #AAC4FF;
opacity:0;
transition:0.5s;
}
#gnb ul li:hover .snb{
opacity: 1;
}아래쪽의 메뉴인 snb에다 미리 opacity:0을 주어서 안보이게 하고, snb의 부모인 li에 hover되었을 경우 opacity:1로 설정해주었습니다.
3. 전체 배경이 내려오면서 리스트 하나씩 내려오기
#gnb {
width: 100%;
background: #eef1ff;
height:50px;
overflow:hidden;
transition:0.5s;
}
#gnb:hover{
height:200px;
}
#gnb .snb {
width:100%;
height:200px;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #AAC4FF;
opacity:0;
transition:0.5s;
}
#gnb > ul > li:hover .snb{
opacity:1;
}위의 두가지 버전을 합친 버전입니다.
'Frontend > HTML + CSS' 카테고리의 다른 글
| [bootstrap] 부트스트랩 사용하여 CSS작성 간단하게 하기 (0) | 2022.11.12 |
|---|---|
| [CSS] 박스 모델 (2) | 2022.10.02 |
| [CSS] 단위(크기), font-size (0) | 2022.10.02 |
| [CSS] 스타일 시트 적용방법, 스타일 우선순위 (0) | 2022.09.27 |
| [HTML] 목록 만들기(ol,ul,li,dl,dt,dd 태그) (0) | 2022.09.27 |
