Web 개발자가 자주 접하는것중 하나가 DropDown 메뉴 입니다.
사이트를 서핑하다가 좋은 메뉴가 있어서 보면 대부분 플래쉬거나, 복잡도가 상당한 메뉴인경우가 대다수 입니다....
혹시 boxy 라고 아시는분이 있을지 모르지만 그거 만든 개발자가 아주 쉽게 개발한 메뉴 스크립트가 있습니다.
스크립트가 아주 짧고 간단하면서도 효율성이 좋아서 소개 합니다..
이름하여 droppy
원사이트에서 설명한 부분을 보자면 Nested drop dwon menus 라는 부제가 있습니다.
즉 하위 아이템이 있으면 자동으로 연결되는 구조라는 얘기인것 같네요, 이제 각설하고 droppy 에 대해 알아 보죠.
아래가 Demo Screen 입니다.
::: droppy 소스 및 관련 css :::
<STYLE type="text/css">
#container { width: 840px; margin: 0 auto; padding: 10px 0;}
/* Basic code - don't modify */
.droppy { display: block; margin: 0; padding: 0; position: relative; }
.droppy li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
.droppy a { display: block; }
.droppy ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
* html .droppy ul { line-height: 0; } /* IE6 "fix" */
.droppy ul a { zoom: 1; } /* IE6/7 fix */
.droppy ul li { float: none; }
.droppy ul ul { top: 0; }
/* Essentials - configure this */
.droppy ul { width: 130px; }
.droppy ul ul { left: 131px; }
/* Everything else is theming */
.droppy { background-color: #30A8C3; height: 24px; }
.droppy *:hover { background-color: none; }
.droppy a { border-right: 1px solid white; color: white; font-size: 12px; padding: 6px; line-height: 1; }
.droppy li.hover a { background-color: #5E5A5A; }
.droppy ul { top: 25px; }
.droppy ul li a { background-color: #5E5A5A; }
.droppy ul a.has-subnav { background-color: #2E2A2A }
.droppy ul a.hover { background-color: #30A8C3; }
.droppy ul a { border-bottom: 1px solid white; border-right: none; opacity: 0.9; filter: alpha(opacity=90); }
/* .droppy ul a { border-bottom: none; } - I also needed this for IE6/7 */
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
* Droppy 0.1.2
* (c) 2008 Jason Frame (jason@onehackoranother.com)
*/
(function($) {
$.fn.droppy = function(options) {
options = $.extend({speed: 250, className: 'droppy', trigger: 'hover'}, options || {});
this.each(function() {
var root = this, zIndex = 1000;
$(root).addClass(options.className);
$(root).find('li:has(> ul) > a').addClass('has-subnav');
function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var subnav = $('> ul', ele);
return subnav.length ? subnav[0] : null;
} else {
return ele;
}
};
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
};
function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', false);
setTimeout(function() {
if (!$.data(subnav, 'cancelHide')) {
$(subnav).slideUp(options.speed);
}
}, 500);
};
function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
return false;
};
if (options.trigger == 'click') {
$('> li', this).click(show);
$('> li ul, > li li', this).hover(show, function() {});
$('ul, li', this).hover(function() {}, hide);
} else {
if (typeof $.fn.hoverIntent == 'function') {
$('ul, li', this).hoverIntent($.extend({
sensitivity: 2, interval: 50, timeout: 100
}, options.hoverIntent || {}, {over: show, out: hide}));
} else {
$('ul, li', this).hover(show, hide);
}
}
$('li', this).hover(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
);
});
};
})(jQuery);
//-->
</SCRIPT>
HTML내에서 메뉴를 만들기.. 아주 쉽니다. 그냥 ul , li 를 tree 구조로 쭉 만들어 주기만 하면 OK
<ul class='nav'>
<li><a href='#'>Top level 1</a>
<ul>
<li><a href='#'>1---------1</a></li>
<li><a href='#'>1---------2</a></li>
<li><a href='#'>1---------3</a>
<ul>
<li><a href='#'>1---------31</a>
<li><a href='#'>1---------32</a>
<li><a href='#' onclick='alert(0)'>1---------33</a>
</ul>
</li>
<li><a href='#'>1---------4</a></li>
</ul>
</li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li>
<a href='#'>Sub 2 - 2</a>
<ul>
<li>
<a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li>
<a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
$(function() {
//$('.nav').droppy({trigger: 'click'});
$('.nav').droppy({trigger: 'hover'});
});
</script>
위에서 보듯이 menu trigger 를 click 이거나 hover 로 사용 가능 하다.
기본 옵션은
options = $.extend({speed: 250, className: 'droppy', trigger: 'hover'}, options || {});
speed 250 ... animation 을 원치 않는다면 그냥 0 으로 처리 한다.
className ... css 를 새로 만들때.
trigger 는 어떨때 메뉴가 열릴거냐를 결정함