많은 드롭다운 메뉴에 대한 예제가 보이지만, 그중에서 가장 간단해보이고 활용하기 쉬운 예제를 찾아 간단히 연습해보고 방법론을 올린다. 아마 숙지하는 것보다는 활용하는게 더 빠를 것 같다는 생각.

먼저 메뉴의 구조는 다음과 같이 HTML로 만들어진다.

<ul class="topnav">
 
  <li><a href="#"></a></li>
  <li> <a href="#">메뉴1</a>
    <ul class="subnav">
      <li><a href="#">서브메뉴</a></li>
      <li><a href="#">서브메뉴</a></li>
    </ul>
    </li>
  <li> <a href="#">메뉴2</a>
    <ul class="subnav">
      <li><a href="#">서브메뉴</a></li>
      <li><a href="#">서브메뉴</a></li>
    </ul>
    </li>
  <li><a href="#">메뉴2</a></li>
  <li><a href="#">메뉴3</a></li>
  <li><a href="#">메뉴4</a></li>
  <li><a href="#">메뉴5</a></li>
</ul>

상위 메뉴가 있고 그 드롭다운으로 하위 메뉴들이 나열되는 방식으로 표현된다.

2010/03/30 01:13 2010/03/30 01:13

Trackback Address :: https://youngsam.net/trackback/1117