정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

CSS 드롭다운 메뉴를 만드는 방법

여기서는 순수 CSS를 사용하여 드롭다운 메뉴를 만드는 방법을 보여 줍니다.

아래 설명에서는 이해를 돕기 위해 다음과 같이 가상 웹 사이트에서 작동하는 2계층 탐색 시스템(상단 탐색)을 만듭니다.

최종 드롭다운 메뉴

  이 항목에서 설명하는 기술을 쉽게 확장하여 개발자의 상황에 적합한 일반 다층 계층 메뉴 시스템을 만들 수 있습니다.

이 2계층 CSS 전용 드롭다운 시스템에 사용된 핵심 태그는 정렬되지 않은 간단한 목록입니다.

첫 번째 드롭다운 메뉴

연결된 태그는 다음과 같습니다.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 1 - CSS Dropdown Menu</title>
</head>

<body>
  <ul id="navWrapper"> <!-- Top Nav -->
    <li> <!-- Menu A -->
      <a href="pageA.html">Menu A</a>
      <ul>
        <li><a href="pageA1.html">Menu A, Item 1</a></li>
        <li><a href="pageA2.html">Menu A, Item 2</a></li>
      </ul>
    </li> <!-- Menu A -->
    <li> <!-- Menu B -->
      <a href="pageB.html">Menu B</a>
      <ul>
        <li><a href="pageB1.html">Menu B, Item 1</a></li>
        <li><a href="pageB2.html">Menu B, Item 2</a></li>
        <li><a href="pageB3.html">Menu B, Item 3</a></li>        
      </ul>
    </li> <!-- Menu B -->
  </ul> <!-- Top Nav -->
  <h1>Page Title Here</h1>
  <p>Primary page content here.</p>
</body>

</html>

이 태그에서 각각의 중첩된 <ul> 목록에 따라 단일 드롭다운 메뉴 목록이 구성됩니다. 이 예에서 메뉴 A의 드롭다운 목록에는 항목이 두 개 있고 메뉴 B에는 항목이 세 개 있습니다.

중첩된 <ul> 목록을 기능을 갖춘 드롭다운 시스템으로 변환하는 첫 번째 단계에서는 메뉴 A메뉴 B를 서로 인접하게 배치합니다.

두 번째 드롭다운 메뉴

연결된 태그가 여기에 표시됩니다.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 2 - CSS Dropdown Menu</title>
  <style>
    a {
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    /**********/
    
    ul#navWrapper {
      border: 1px black dashed;
    }
    
    ul#navWrapper li {
      border: 1px red dashed;    
      float: left;
      list-style: none;
    }
    
    ul#navWrapper li li {
      border: 1px blue dashed;    
      float: none;
    }
    
    /**********/
    
    div#content {
      border: 1px green dashed;    
      clear: both;
    }
  </style>
</head>

<body>
  <ul id="navWrapper"> <!-- Top Nav -->
    <li> <!-- Menu A -->
      <a href="pageA.html">Menu A</a>
      <ul>
        <li><a href="pageA1.html">Menu A, Item 1</a></li>
        <li><a href="pageA2.html">Menu A, Item 2</a></li>
      </ul>
    </li> <!-- Menu A -->
    <li> <!-- Menu B -->
      <a href="pageB.html">Menu B</a>
      <ul>
        <li><a href="pageB1.html">Menu B, Item 1</a></li>
        <li><a href="pageB2.html">Menu B, Item 2</a></li>
        <li><a href="pageB3.html">Menu B, Item 3</a></li>        
      </ul>
    </li> <!-- Menu B -->
  </ul> <!-- Top Nav -->
  <div id="content">
    <h1>Page Title Here</h1>
    <p>Primary page content here.</p>
  </div>
</body>

</html>

주요 CSS는 다음과 같습니다.


ul#navWrapper li {
  float: left;
  list-style: none;
}

메뉴 A메뉴 B를 부동의 상태로 띄워서 서로 인접하게 배치하고 모든 글머리 기호를 제거합니다. 이때 각 중첩된 메뉴 항목도 함께 부동의 상태로 됩니다. 이 문제를 해결하려면 중첩된 메뉴 항목에 대한 부동 요청을 지웁니다.


ul#navWrapper li li {
  float: none;
}

기본 콘텐츠가 필요 없이 부동 상태로 되지 않도록 clear: both를 사용하여 모든 이전 부동 요청을 취소합니다.


div#content {
  clear: both;
}

이제 메뉴 A 또는 메뉴 B를 클릭하면 연결된 메뉴가 나타나도록 메뉴 목록 항목을 숨겨야 합니다.

세 번째 드롭다운 메뉴

연결된 태그는 다음과 같습니다.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 3 - CSS Dropdown Menu</title>
  <style>
    a {
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    /**********/
    
    ul#navWrapper {
      border: 1px black dashed;
    }
        
    ul#navWrapper li {
      border: 1px red dashed;    
      float: left;
      list-style: none;
    }
    
    ul#navWrapper li li {
      border: 1px blue dashed;    
      float: none;
    }

    ul#navWrapper ul {
      display: none;
    }
    
    ul#navWrapper li:hover ul {
      display: block;
    }
    
    /**********/
    
    div#content {
      border: 1px green dashed;    
      clear: both;
    }
  </style>
</head>

<body>
  <ul id="navWrapper"> <!-- Top Nav -->
    <li> <!-- Menu A -->
      <a href="pageA.html">Menu A</a>
      <ul>
        <li><a href="pageA1.html">Menu A, Item 1</a></li>
        <li><a href="pageA2.html">Menu A, Item 2</a></li>
      </ul>
    </li> <!-- Menu A -->
    <li> <!-- Menu B -->
      <a href="pageB.html">Menu B</a>
      <ul>
        <li><a href="pageB1.html">Menu B, Item 1</a></li>
        <li><a href="pageB2.html">Menu B, Item 2</a></li>
        <li><a href="pageB3.html">Menu B, Item 3</a></li>        
      </ul>
    </li> <!-- Menu B -->
  </ul> <!-- Top Nav -->
  <div id="content">
    <h1>Page Title Here</h1>
    <p>Primary page content here.</p>
  </div>
</body>

</html>

메뉴를 숨기려면 다음과 같이 합니다.


ul#navWrapper ul {
  display: none;
}

메뉴를 숨김 해제하려면 다음과 같이 합니다.


ul#navWrapper li:hover ul {
  display: block;
}

이제 마우스를 최상위 탐색 요소(예: 메뉴 A) 위에 놓으면 연결된 메뉴 목록이 표시됩니다. 이렇게 하면(예제 3 참조) 표시된 메뉴 아래의 모든 콘텐츠가 적용됩니다. 최상의 동작만을 수행하도록 절대 위치(예제 4 참조)를 사용합니다.

네 번째 드롭다운 메뉴

연결된 태그는 다음과 같습니다.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 4 - CSS Dropdown Menu</title>
  <style>
    a {
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    /**********/
    
    ul#navWrapper {
      border: 1px black dashed;
      margin-left: -41px;
    }
        
    ul#navWrapper li {
      border: 1px red dashed;    
      float: left;
      list-style: none;
      margin-right: 0.5em;
      background-color: #DDD;
      padding: 0 0.25em;
    }
    
    ul#navWrapper li li {
      border: 1px blue dashed;    
      float: none;
      margin-left: -44px;
      margin-top: 3px;
    }

    ul#navWrapper li li:first-child { 
      margin-top: 4px;
    }

    ul#navWrapper ul {
      display: none;
      position: absolute;
    }
    
    ul#navWrapper li:hover ul {
      display: block;
    }
    
    /**********/
    
    div#content {
      border: 1px green dashed;    
      clear: both;
    }
  </style>
</head>

<body>
  <ul id="navWrapper"> <!-- Top Nav -->
    <li> <!-- Menu A -->
      <a href="pageA.html">Menu A</a>
      <ul>
        <li><a href="pageA1.html">Menu A, Item 1</a></li>
        <li><a href="pageA2.html">Menu A, Item 2</a></li>
      </ul>
    </li> <!-- Menu A -->
    <li> <!-- Menu B -->
      <a href="pageB.html">Menu B</a>
      <ul>
        <li><a href="pageB1.html">Menu B, Item 1</a></li>
        <li><a href="pageB2.html">Menu B, Item 2</a></li>
        <li><a href="pageB3.html">Menu B, Item 3</a></li>        
      </ul>
    </li> <!-- Menu B -->
  </ul> <!-- Top Nav -->
  <div id="content">
    <h1>Page Title Here</h1>
    <p>Primary page content here.</p>
  </div>
</body>

</html>

주요 CSS는 다음과 같습니다.


ul#navWrapper ul {
  display: none;
  position: absolute;
}

여기서 모든 중첩된 <ul> 요소(메뉴 목록)는 일반 방향과 다른 절대 위치에 배치됩니다(이전의 최적화되지 않은 동작 문제 해결). 또한 CSS 설명에서 상단 탐색의 모양을 다음과 같이 개선했습니다.


ul#navWrapper {
  border: 1px black dashed;
  margin-left: -41px; /* Account for missing bullet space, etc. */
}

ul#navWrapper li {
  border: 1px red dashed; 
  float: left;
  list-style: none;
  margin-right: 0.5em; /* Place some space between the adjacent top nav items. */ 
  background-color: #DDD; /* Add a background color to all nav items. */
  padding: 0 0.25em; /* Place a little space around nav item text. */
}

ul#navWrapper li li {
  border: 1px blue dashed; 
  float: none; 
  margin-left: -44px; /* Account for missing bullet space, etc. */
  margin-top: 3px; /* Place some space between the vertical dropdown menu items. */ 
}

ul#navWrapper li li:first-child { 
  margin-top: 4px; /* Add a touch more space between a top nav item and its associated drop-down menu. */
}

아직 모르겠으면 예제 4에서 다음과 같이 해보세요.

  1. 마우스를 메뉴 A 위로 이동하면 연결된 메뉴 목록이 표시됩니다.
  2. 마우스를 메뉴 A, 항목 1에서 메뉴 A, 항목 2로 천천히 이동하면 메뉴가 사라지므로 메뉴 A, 항목 2를 클릭할 수 없습니다.

이 동작은 Windows Internet Explorer의 유용한 기능이며, 다음과 같이 메뉴 항목 뒤에 투명한 배경을 그려서 해결할 수 있습니다.


ul#navWrapper ul {
  display: none;
  position: absolute;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0);
}

브라우저에서 rgba를 지원하지 않는 경우 background-color: #FFF를 사용하여 비슷한 결과를 얻을 수 있습니다. 배경색이 흰색이 아닌 경우 #FFF를 해당 배경색으로 변경해야 합니다.

다음 마지막 예에서는 이 해결 방법을 구현하고 몇 가지 향상된 기능을 추가합니다.

최종 드롭다운 메뉴

연결된 태그는 다음과 같습니다.


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 5 - CSS Dropdown Menu</title>
  <style>
    a, a:hover {
      text-decoration: none;
    }
        
    /**********/
    
    ul#navWrapper {
      border: 0 black dashed;
      margin-left: -39px;
      float: left;
    }
        
    ul#navWrapper li {
      border: 0 red dashed;    
      float: left;
      list-style: none;
      margin-right: 0.75em;
      background-color: #DDD;
      padding: 0 0.25em;
      border-radius: 4px;
      box-shadow: 3px 3px 6px 1px #333;
    }
    
    ul#navWrapper li li {
      border: 0 blue dashed;    
      float: none;
      margin-left: -44px;
      margin-top: 3px;
    }

    ul#navWrapper li li:first-child { 
      margin-top: 4px;
    }

    ul#navWrapper ul {
      display: none;
      position: absolute;
      background-color: #FFF; /* For non-CSS3 browsers. */
      background-color: rgba(255, 255, 255, 0);
    }
    
    ul#navWrapper li:hover ul {
      display: block;
    }
    
    ul#navWrapper a {
      font-weight: bold;
    }
    
    ul#navWrapper li:hover {
      background-color: #8C8D61;
    }    
    
    /**********/
    
    div#banner {
      border: 1px black solid;
      border-radius: 4px;    
      clear: both;
      height: 4em;
      background-color: rgb(85, 126, 185); /* For non-CSS3 browsers. */
      background-image: -webkit-radial-gradient(100% 0%, circle cover, rgb(104,24,136) 0%, rgb(85,126,185) 100%);
      background-image: radial-gradient(circle at 100% 0%, rgb(104,24,136) 0%, rgb(85,126,185) 100%); /* IE10 and later */
    }
  </style>
</head>

<body>
  <ul id="navWrapper"> <!-- Top Nav -->
    <li> <!-- Menu A -->
      <a href="pageA.html" aria-haspopup="true">Menu A</a>
      <ul>
        <li><a href="pageA1.html">Menu A, Item 1</a></li>
        <li><a href="pageA2.html">Menu A, Item 2</a></li>
      </ul>
    </li> <!-- Menu A -->
    <li> <!-- Menu B -->
      <a href="pageB.html" aria-haspopup="true">Menu B</a>
      <ul>
        <li><a href="pageB1.html">Menu B, Item 1</a></li>
        <li><a href="pageB2.html">Menu B, Item 2</a></li>
        <li><a href="pageB3.html">Menu B, Item 3</a></li>        
      </ul>
    </li> <!-- Menu B -->
  </ul> <!-- Top Nav -->
  <div id="banner"></div>
  <div id="content">
    <h1>Page Title Here</h1>
    <p>Primary page content here.</p>
  </div>
</body>

</html>

터치 사용 장치에서 가리키기를 시뮬레이션하는 방법에 설명된 것처럼 두 가지 aria-haspopup="true" 특성을 사용하여 Internet Explorer 터치 환경을 개선합니다. 예를 들어 메뉴 A를 터치하면 pageA.html로 즉시 이동하지 않고 드롭다운 메뉴가 나타납니다. pageA.html로 이동하려면 메뉴 A를 한 번 더 클릭해야 합니다.

결론적으로 위에서 설명한 기본 패턴을 확장하여 거의 모든 다층 계층 CSS 기반 메뉴 시스템을 만들 수 있습니다.

관련 항목

Contoso 이미지 사진 갤러리
JavaScript 기반 연속 탐색 시스템을 만드는 방법
CSS를 사용하여 탐색을 향상시키는 방법
터치 사용 장치에서 가리키기를 시뮬레이션하는 방법

 

 

표시:
© 2014 Microsoft