Simple Drop-Down Menu


Description: シンプルなドロップダウンメニューです。アニメーションもなく、わかりやすさのみを追求したグローバルメニューと言えそうです。
Sample: dmeo
Tutorial: jQuery Simple Drop-Down Menu Plugin
License: -

Sample

Note

var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;

軽量で済みますね

Related snippet :

  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: シンプルなマルチレベルドロップダウンメニューです。クロスブラウザで動作します。アニメーションもなく、汎用的で最も使いやすいかもしれません。 ...
  • Description: シンプルでベーシックなドロップダウンメニューです。簡単なアニメーション付きで、クロスブラウザ対応です。最もよく見るタイプのメニューですね。 ...
  • Description: ラインごとドロップダウンするグローバルメニューです。簡単なコードで実装できます。クロスブラウザで動いてくれるので使い勝手も良さそうですね。 ...
  • Description: マウスオーバーで要素が滑らかにプルダウンするメニューです。軽量で動きも流動的でインパクトがあります。 Sample: demo ...
  • Description: MootoolsのサイトにあるようなメニューのエフェクトをjQueryで動かしたもの。アクセス時にアニメーションを掛け、マウスオーバー時にもアニメー ...
  • Description: ドロップダウンするシンプルなグローバルメニューです。2段目からはサイドアウトしますよ。クロスブラウザにも対応しています。 Sample: ...