티스토리 뷰

웹프로그래밍/js

마우스 오버 스크롤 메뉴

공허공자 2009. 7. 7. 14:02

prototype.js

	function menuButtonMouseOver(event) {
	  var menuButton = $('api_menu_button');
	  var target = event.element();
	  if (target === menuButton || target.descendantOf(menuButton)) {
		$('api_menu').show();
	  }
	}

	function menuButtonMouseOut(event) {
	  var menuButton = $('api_menu_button');
	  var menu = $('api_menu');
	  var target = event.element(), related = event.relatedTarget || event.toElement;

	  if (related && (related === menu || related.descendantOf(menu))) return;
	  menu.hide();
	}

	function menuMouseOut(event) {
	  var menu = $('api_menu'), related = event.relatedTarget || event.toElement;
	  if (related && !related.descendantOf(menu)) {
		arguments.callee.timer = Element.hide.delay(0.5, menu);
	  } else {
		window.clearTimeout(arguments.callee.timer);
	  }
	}

	function menuItemMouseOver(event) {
	  var element = event.element();
	  if (element.tagName.toLowerCase() === 'a') {
		element.addClassName('highlighted');
	  }
	}

	function menuItemMouseOut(event) {
	  var element = event.element();
	  if (element.tagName.toLowerCase() === 'a') {
		element.removeClassName('highlighted');
	  }
	}

	var MENU_ITEMS;

	document.observe('dom:loaded', function() {
	  MENU_ITEMS = $$('.api-box .menu-item a');

	  $('api_menu_button').observe('mouseenter', menuButtonMouseOver);
	  $('api_menu_button').observe('mouseleave', menuButtonMouseOut );

	  $('api_menu').observe('mouseleave', menuMouseOut);

	  if (Prototype.Browser.IE) {
		$('api_menu').observe('mouseover', menuItemMouseOver);
		$('api_menu').observe('mouseout',  menuItemMouseOut);
	  }
	});

전체소스:
mover_scrollmenu.ZIP

구현된곳: http://scripty2.com/doc/

'웹프로그래밍 > js' 카테고리의 다른 글

Prototype JS로 Checkbox들 모두 선택 구현  (1) 2009.11.05
Scriptaculous SelectBox  (0) 2009.08.25
모든 자바스크립트 오류를 디버그 콘솔에 던지기  (0) 2009.06.01
Shadowbox.js  (0) 2009.05.07
prototype & scriptaculous 이용한 간단한 slide show  (0) 2009.05.07
공유하기 링크
댓글