[HTML/CSS] 드롭다운 2차메뉴 만들기

[HTML/CSS] 드롭다운 2차메뉴 만들기

홈페이지를 들어가보면 메뉴 탭에 마우스를 가져가면 하위 메뉴가 아래로 내려가면서 보이는 탭이 있다.

위의 메뉴는 디자인이 되지 않아 볼품없지만, 오늘 다룰 코드들을 활용해서 모든 페이지들이 만들어진다고 보면된다.

자바스크립트를 이용해서 더 유연하게 내려온다던지 하는 것을 아래의 코드들을 변형 또는 발전시켜서 만드는 것이다.

 

아래에서는 html과 css만 사용해서 메뉴를 구현하였다. 코드들을 살펴보자.

 

1. html 구성

<nav class="menu-box-1">
  <ul>
    <li>
      <a href="#">1차 메뉴 아이템 1</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 2</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 3</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

기본 뼈대를 만든다. ul 태그와 li 태그를 통해서 아이템의 리스트를 구현한다.

nav는 전체 태그를 감싼다.

 

 

2. CSS 구성

 

1) 노멀라이즈

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}
/* 노말라이즈 끝 */

노멀라이즈는 기본값을 세팅해서 브라우저 별로 코드 구현 결과물이 차이가 덜 나도록 하는 것이다.

body, ul, li, a의 값들을 초기화해 준다고 생각하면 된다. 기본적으로 씌워져있는 스타일들을 덜어내고 아래에서 하나씩 작업해 볼 것이다.

 

CSS 구성 할 때는 어느 클래스의 몇 번째 층위에 있는 것의 디자인을 바꿀 것인지를 잘 생각해야 한다.

헷갈릴 수 있기 때문에, 사전에 자식 클래스, 자손 클래스, 선택자 등을 잘 아는 것이 먼저라고 생각한다.

 

2022.06.15 - [IT 지식/HTML\CSS] - [HTML/CSS] 필수 CSS 선택자, CSS 속성 모음

[HTML/CSS] 필수 CSS 선택자, CSS 속성 모음

2022.06.23 - [IT 지식/HTML\CSS] - [CSS] 가상선택자, 에밋(emmet)

[CSS] 가상선택자, 에밋(emmet)

 

 

2) 메뉴 박스와 1차 메뉴, 1차 메뉴 아이템 구성하기

 

/* 메뉴박스 */
.menu-box-1 {
  text-align:center;
}

/* 메뉴 */
.menu-box-1 ul {
  background-color:#afafaf;
}

/* 1차 메뉴 */
.menu-box-1 > ul {
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}

/* 1차 메뉴 아이템 */
.menu-box-1 > ul > li {
  display:inline-block;
  position:relative;
}

/* 메뉴 아이템 텍스트 */
.menu-box-1 ul > li > a {
  padding:10px;
  display: block;
  font-weight:bold;
}

.menu-box-1은 nav에 붙어있을 클래스이다. 

 

(1) 먼저 nav(이하 .menu-box-1)의 텍스트를 중앙으로 불러들인다.

 

(2) .menu-box-1의 '자손' ul의 색깔을 회색 비스무리한 색으로 바꾼다(자손은 자식을 포함 손자까지 모두를 지칭한다).

(만약 여기가 아니라, 자식 클래스에 background-color를 넣으면, 2차메뉴에서 색이 흰색으로 출력된다.)

자손과 자식을 잘 구분해야 하는 이유

 

(3) .menu-box-1의 '자식' ul의 display 속성을 inline-block으로 바꾼다. 그렇게 해야 메뉴들이 나란히 안으로 정렬되어 있을 수 있다. 그리고 패딩 값을 적절히 주고, 전체 외형을 곡선으로 만들어주기 위해 border-radius를 둔다.

 

(4) .menu-box-1의 '자식' ul의 '자식' li의 속성을 inline-block으로 만든다. 그리고 position을 relative로 바꾼다.

li의 경우, '글자'가 들어가있는 박스이다. html 문서를 보면 알 수 있는데, li 안에 a 태그가 들어가있는 것을 알 수 있다.

 

(5) .menu-box-1의 '자식' ul의 '자식' li의 자식 'a' 태그의 값들을 바꾼다. 패딩을 주어 가운데에 위치하게 하고, display를 블럭형식으로 해준다. 그리고 폰트를 굵게 해준다.

 

 

 

2) :hover, 2차메뉴 구성

/* 호버된 메뉴 아이템의 텍스트 */
.menu-box-1 ul > li:hover > a {
  background-color:black;
  color:white;
}

/* 2차 메뉴 */
.menu-box-1 > ul > li > ul {
  position:absolute;
  display:none;
  top:100%;
  left:0;
}

/* 호버된 1차 메뉴 아이템의 자식 메뉴 */
.menu-box-1 > ul > li:hover > ul {
  display:block;
}

(1) hover는 마우스를 가져다 댔을 때 나타나는 속성이다. 당연히 마우스를 갖다 대면 어떤 효과가 나타나야 선택하고 있는 느낌이 들지 않는가? li 태그에 hover를 붙였는데, li 태그 자체가 눌렸을 때, 배경색 검정, 글자색 흰색이 적용된다.

 

(2) 2차메뉴는 menu-box-1의 자식 ul태그의 자식 li의 자식 ul 태그를 지칭한다. position을 absolute로 두었는데, 그 이유는, 2차 메뉴들이 상위 부모인 div 태그들의 경계를 뚫고 나가야 하기 때문이다.

만약 position을 absolute로 두지 않으면 다음과 같은 불상사가 일어난다.

absolute가 아니라 relative로 두었을 때

상위 컨텐츠도 relative기 때문에, hover를 하는 순간 2차 메뉴 아이템이 보이게 되면서 동시에 같이 커지는 일이 일어난 것이다.

경계를 무시하고 나가기 위해서는 absolute가 필요하다.

 

사실 display는 none으로 해서 평소 보이지 않다가 hover되면 나타나도록 해준다. (3)에서 하는 것이다.

 

그리고 top을 100%, left를 0으로 해서 상단 메뉴에 하위 메뉴를 딱 붙여준다.

 

(3) 2차 메뉴 아이템 위를 호버할 때 배경색이 바뀌도록 해준다.

 

 

 

3. 전체 CSS 코드

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}
/* 노말라이즈 끝 */

/* 메뉴박스 */
.menu-box-1 {
  text-align:center;
}

/* 메뉴 */
.menu-box-1 ul {
  background-color:#afafaf;
}

/* 1차 메뉴 */
.menu-box-1 > ul {
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}

/* 1차 메뉴 아이템 */
.menu-box-1 > ul > li {
  display:inline-block;
  position:relative;
}

/* 메뉴 아이템 텍스트 */
.menu-box-1 ul > li > a {
  padding:10px;
  display: block;
  font-weight:bold;
}

/* 호버된 메뉴 아이템의 텍스트 */
.menu-box-1 ul > li:hover > a {
  background-color:black;
  color:white;
}

/* 2차 메뉴 */
.menu-box-1 > ul > li > ul {
  position:absolute;
  display:none;
  top:100%;
  left:0;
}

/* 호버된 1차 메뉴 아이템의 자식 메뉴 */
.menu-box-1 > ul > li:hover > ul {
  display:block;
}