출처 : http://kousa.tistory.com/571
2010/03/20 04:36
'CSS & Javascript' 를 이용한 드롭다운 메뉴(Drop-Down Menu)
드롭다운(풀다운) 메뉴는 웹 디자인시 필수 항목이라고 말할 정도로 중요한 부분을 차지한다. 또한 메뉴 자체를 어떻게 구성하느냐에 따라 웹 디자인의 전체적인 구성 및 친화적인 이미지에도 많은 영향을 미친다. 드롭다운 메뉴의 특징은 카테고리와 서브 카테고리의 효율적인 관리에 용이하다는 점이다.
그렇다면, 어떻게 드롭다운 메뉴를 쉽고 간편한게 만들 수 있을까? 해답은 의외로 간단하다.
전문가 입장에서 보면 별거 아닌 것처럼 느껴지겠지만, 사실 나와 같은 초보들에게는 이 보다 좋은 방법은 없을 것이다. 그럼 지금부터 CSS와 Javascript를 이용해서 다양한 모양의 드롭다운 메뉴를 만들 수 있는 방법에 대해서 알아보자.
CSS만을 이용한 드롭다운 메뉴 (CSS Only)
Javascript 사용에 어려움을 느끼는 사람들도 쉽게 사용할 수 있는 CSS 전용 드롭다운 메뉴.
1. Free CSS Drop-Down Menu Framework
[Demo]
더보기
free-css-drop-down-menu_v1.0.2.zip2. The Ultimate CSS only Drop-Down Menu
[Demo]
더보기
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
3. CSS Express Drop-Down Menu
[Demo]
CSS + Javascript 메뉴
Javascript를 이용한 드롭다운 메뉴는 CSS 전용에 비해 모양과 느낌 아울러 섬세하고 에니메이션적인 요소가 가미된 메뉴를 만들 수 있는 장점이 있다.
1. Javascript Drop-Down Menu with Multi Levels
[Demo]
더보기
2. All Levels Navigational Menu (v2.2)
[Demo]
더보기
/* 메뉴 구성 Sample */
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3">Web Tools</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
----------------------------------------------------------------------------------
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3">Web Tools</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
----------------------------------------------------------------------------------
3. Professional Drop-Down #1
[Demo]
더보기
4. Drop-Down Tabs (5 Styles)
5. Chrome CSS Drop-Down Menu (v2.5)
* 상용 목적이 아닌 경우 사용이 가능합니다.
* 각 사이트별로 사용법 및 적용 방법 등이 자세하게 설명되어 있으니 참고하시기 바랍니다.
'html/css' 카테고리의 다른 글
| 퀵메뉴 (스크롤배너) (0) | 2012.03.19 |
|---|---|
| ie6 드롭다운 대체 (0) | 2012.01.26 |
| 주소줄 옆 호환성보기를 없애자 (0) | 2011.11.03 |
| 테이블은 이제 그만 쉬어야 할 때. (0) | 2011.03.25 |
| marquee 태그 (1) | 2011.02.23 |