CSS 드롭다운 메뉴(gnb) 만들기

드롭다운 메뉴란?

드롭다운 메뉴는 웹 페이지에서 사용자가 메뉴 아이템을 선택할 때 추가적인 옵션들이 드롭다운 형태로 나타나는 메뉴이다. 주로 웹페이지 상단 메뉴에서 사용되며, 메뉴 항목을 클릭하거나 마우스 호버하면 하위 메뉴 항목들이 펼쳐지는 형태이다.
필자도 javascript나 JQuery에 익숙치 않을 때 많이 쓰던 방식인데, CSS로 만든다고 해서 기능이 떨어지진 않는다.

 

드롭다운 메뉴 만들기

단순히 CSS만으로는 드롭다운메뉴를 만들 수는 없다.
먼저 HTML을 작성해 준다.

<nav>
    <ul>
      <li>
        <a href="#">menu01</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">menu02</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">menu03</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">menu04</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
    </ul>
  </nav>

 

ul태그 안에 서브메뉴 ul이 있는 방식으로 만들었습니다.

다른 태그로 작성해도 큰 상관은 없습니다.

 

HTML만 작성해서는 우리가 원하는 디자인을 얻을 수 없기 때문에 CSS도 작성해 줍니다.

nav{width: 100%;max-width: 500px;}
nav ul{list-style: none;z-index: 2;}
nav a{color:#000;text-decoration: none;}
nav > ul{display: flex;width: 100%;justify-content: space-between;padding:10px;}
nav > ul > li{position: relative;}
nav > ul > li > a{font-size: 20px;font-weight: bold;padding:10px 0;}
nav > ul > li > a:hover{color:#999;}
nav > ul > li > ul{display: none; position: absolute; left:50%; transform: translateX(-50%);border:1px solid #ddd;border-radius: 6px;background: #fff;}
nav > ul > li:hover ul{display:block;}
nav > ul > li  li a{display: block; padding:10px 15px;}
nav > ul > li  li a:hover{background:#eee;}
nav > ul > li > li + li{margin-top:5px;}

 

HTML에 CSS를 입히고, ul안의 ul은 display:none;으로 작성해서 일단 화면 보이지 않게 한다.

그다음에 CSS의 hover라는 기능을 통해 li를 마우스로 호버했을 때 ul안의 ul을 보여주게 작성한다.

 

간단하게 HTML과 CSS의 작성만으로 드롭다운 메뉴를 쉽게 만들 수 있다.

코드 작성 결과는 아래에서 확인 할 수 있다.

 

See the Pen CSS드랍메뉴 by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

필자는 간단하게 작성했지만, 여기에 애니메이션같은 모션까지 넣어주면 더 좋을 것 같다.

이 코드를 기초로 두고 여러가지 시도를 해보는 것도 재밌을 것 같다.

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다