Front-end 공부하기

[CSS] 맨 위에 붙어있는 menu bar 만들기(전체 메뉴 drop down) - Flex box 이용

Chikaka 2022. 7. 26. 17:07

drop down이 되는 menu bar을 만들어 줄건데

header 아래 contents가 있다고 가정하고

drop down될 때 contents를 밀어내는 것이 아니라

contents 위에서 하위 메뉴를 보여줄 수 있도록 하겠습니다.

Flex box를 이용해서 만들어 볼게요!

 

 

<최종 목표!>

 

 

 

 

 

header 밑에 contents를 임의로 만들어 주겠습니다.

 

 

1. 먼저 원하는 메뉴 리스트를 만들어 줍니다.

 

 

 

 

2. 그다음 리스트 스타일을 전부 없애줍니다.

- padding: 0; 으로 왼쪽에 있던 공백 없애주기

 

 

 

3. 아래로 정렬되어 있는 메뉴들을 옆으로 정렬시킵니다. (Main menu 기준으로)

- display: flex; 를 이용하면 옆으로 정렬됩니다.

- .navbar__menu 는 Main menu를 감싸고 있는 ul 태그의 class 명입니다.

 

 

** 초반에 빼먹은 작업을 해줍니다.

- a 태그 밑줄을 없애고 색은 검정색으로!

 

 

 

4. header에 배경색을 넣고 height도 주었습니다.

+ 스크롤 내려도 맨 위에 붙어있도록 sticky도 해주었습니다.

- width: 100vw; 에서 vw는 view width를 의미한다.

view width에서 view는 현재 모니터를 의미하니까 100vw는 모니터 width 100%를 말한다.

- 맨 위에 붙어있기 위해 top:0; left:0; 필수!

 

 

(아래 베이지색은 contents 부분입니다.)

 

 

 

5.  메뉴들을 메뉴바 가운데로 일정한 간격을 두고 배치되도록 합니다.

 

- justify-content: space-evenly; -> display: flex;일때 사용할 수 있는 속성입니다.

center, space-evenly, space-around, space-between이 있습니다.

 

 

 

6. header를 넘어간 부분은 숨겨줍니다. -> hover시 보였다 안보였다 할 부분

- overflow : hidden;을 이용

 

 

7. Main menu와 Sub menu 의 간격의 띄워야겠죠

- Sub menu class에 margin-top 을 주어 띄워줍니다.

 

 

 

8. header 에 hover 주기!

 

[기본]

 

[hover했을 때]

그러면 이렇게 hover 했을 때 Sub menu를 볼 수 있다.

 

 

 

 

근데 여기서 문제점이 저 contents를 가리면서 drop down 되었으면 좋겠는데 

지금은 contents를 밑으로 내리면서 drop down된다.

(그리고 메뉴바는 현재 position: sticky;로 스크롤 내려도 맨위에 붙어있는 상황)

-> 해결방법 : 현재 위치에 영향이 없으려면 position: absolute;를 사용하여 부모 요소에 붙여놓아야 한다.

그런데 position은 한가지밖에 못쓰니 sticky + absolute 합쳐진 fixed를 사용!

예시를 위해 h1 태그를 3개 써줬다.

 

 

[position: sticky; 일 때]

 

[position: fixed; 일 때]

 

 

그럼 여기서 또 문제점!

header에 가려진 contents 부분은?

->해결방법! contents를 header 길이만큼 내려주면된다.

- margin-top으로 contents 내려주기

 

 

 

 

 

그럼 이렇게 드롭다운 + 위에 딱 붙어있는 메뉴바 완성!!

 

 

전체 코드 (HTML, CSS)

<html>
<head>
</head>

<body>
  <header>
        <div class="navbar__div">
          <nav class="navbar">
              <ul class="navbar__menu">
                  <li class="menu">
                      <div>
                          <a href="/" class="menu__title">Main menu1</a>
                      </div>
                      <ul id="topSubm1" class="navbar__submenu">
                          <li><a href="#">Sub menu1</a></li>
                          <li><a href="#">Sub menu2</a></li>
                          <li><a href="#">Sub menu3</a></li>
                          <li><a href="#">Sub menu4</a></li>
                          <li><a href="#">Sub menu5</a></li>
                          <li><a href="#">Sub menu6</a></li>
                          <li><a href="#">Sub menu7</a></li>
                      </ul>
                  </li>
                <li class="menu">
                      <div>
                          <a href="/" class="menu__title">Main menu2</a>
                      </div>
                      <ul class="navbar__submenu">
                          <li><a href="#">Sub menu1</a></li>
                          <li><a href="#">Sub menu2</a></li>
                          <li><a href="#">Sub menu3</a></li>
                      </ul>
                  </li>
            </ul>
          </nav>
    </div>
  </header>
  <div class="contents">
    <h1>H1입니다</h1>
    <h1>H1입니다</h1>
    <h1>H1입니다</h1>
  </div>
</body>
</html>

 

body {
  background-color: white;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

header {
  position: fixed;
  top:0;
  left:0;
  background-color: #a7dbee;
  width: 100vw;
  height: 50px;
  overflow : hidden;
}

.navbar__menu {
  display: flex;
  justify-content: space-evenly;
}

.navbar__submenu{
  margin-top: 10px;  
}

header:hover{
  height: 200px;
}

.contents {
  width: 100%;
  height: 500px;
  background-color: beige;
  margin-top: 50px;
}