336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
HTML을 사용해서 중첩하는 링크를 만들고, CSS를 사용해 이 링크들을 탐색 메뉴처럼 꾸민 후 하위 메뉴는 숨기도록 한다. 그 다음에 탐색 메뉴의 버튼에 마우스를 올리면 메뉴를 애니메이션하며 보여주는 자바스크립트를 추가하면 된다.
<HTML>
탐색 메뉴에 사용할 HTML은 <ul>태그를 사용하는 순서 없는 목록이다. 최상위 <li> 태그는 탐색 메뉴의 메인 버튼이다. 하위 메뉴를 만들려면, 먼저 하위 메뉴를 포함할 <li> 태그 안에 중첩하는 <ul> 태그를 만든다.
이런식으로 할 수 있다. 이러면 탐색버튼은 처음으로, 제품소개 두개가 나오게 되고, 제품소개 아래에는 두개의 중첩 목록이 생긴다.
<CSS>
실제 대부분의 작업을 담당하는 것은 탐색 메뉴에 사용할 스타일 시트이다. 스타일 시트는 한 무더기의 중첩되는 목록에서 부모 목록을 가로로 늘어선 버튼들로 바꾸고, 중첩된 자식 목록은 부모 목록 버튼의 하위 메뉴로 만들며, 세 번째 단계의 메뉴는 부모 목록 링크의 오른쪽에 위치시키는 역할을 한다.
<자바스크립트>
메뉴를 보여주거나 감추기 위한 자바스크립트 사용법의 기본 컨셉은 단순하다. 목록 항목에 마우스를 올렸을 때 자식 목록(팝업 메뉴)이 있다면 자식 목록을 보여주고, 반대로 목록에서 마우스를 비켰을 때는 자식 목록을 감추는 것이다. 그리고 팝업 메뉴가 사라지는 시간을 지연시켜주기 위해 타이머 기능을 사용한다.
<HTML>
탐색 메뉴에 사용할 HTML은 <ul>태그를 사용하는 순서 없는 목록이다. 최상위 <li> 태그는 탐색 메뉴의 메인 버튼이다. 하위 메뉴를 만들려면, 먼저 하위 메뉴를 포함할 <li> 태그 안에 중첩하는 <ul> 태그를 만든다.
| <ul class = "nav"> <li><a href="index.html">처음으로</a></li> <li><a href="pages/products.html">제품소개</a> <ul> <li> ~~~ 써주고 </li> <li> ~~~ 써주고 </li> </ul> </li> </ul> |
<CSS>
실제 대부분의 작업을 담당하는 것은 탐색 메뉴에 사용할 스타일 시트이다. 스타일 시트는 한 무더기의 중첩되는 목록에서 부모 목록을 가로로 늘어선 버튼들로 바꾸고, 중첩된 자식 목록은 부모 목록 버튼의 하위 메뉴로 만들며, 세 번째 단계의 메뉴는 부모 목록 링크의 오른쪽에 위치시키는 역할을 한다.
<자바스크립트>
메뉴를 보여주거나 감추기 위한 자바스크립트 사용법의 기본 컨셉은 단순하다. 목록 항목에 마우스를 올렸을 때 자식 목록(팝업 메뉴)이 있다면 자식 목록을 보여주고, 반대로 목록에서 마우스를 비켰을 때는 자식 목록을 감추는 것이다. 그리고 팝업 메뉴가 사라지는 시간을 지연시켜주기 위해 타이머 기능을 사용한다.
'공부 > 자바스크립트 jQuery' 카테고리의 다른 글
| jQuery) Submit (전송버튼) (0) | 2012.01.30 |
|---|---|
| jQuery) 폼 필드 선택자 (0) | 2012.01.30 |
| jQuery) 새 창을 여는 이벤트 (0) | 2012.01.25 |
| jQuery) 새 창에서 외부 링크 열기 (0) | 2012.01.25 |
| jQuery) lightBox를 사용한 갤러리 (0) | 2012.01.18 |
댓글