jQuery：ホステスのメモ。 最も単純なドロップダウン。

ドロップダウンメニューを作成する必要がありました。 そして、行全体のうち、1つのアイテムのみ。 jQuery用のヘビーウェイトプラグインを引き付けたくありませんでしたが、必要な場合はどうすればよいでしょうか。 ヘビー級はいくらですか？ 5〜15K。 さらに、5K、サードパーティが必要とするいくつかのプラグインを考慮しない場合。 一般に、それほど致命的ではありません。



プラグインの接続は簡単でした。 本当の問題は、必要な設計を引き出すことでした。 正直に3つ試しました。 それぞれには、スタイルのすべての自由を提供するCSSファイルが含まれていました。 そこにはありませんでした。 トップラインとドロップダウンリストに異なるスタイルを作成する機会を与えませんでした。 また、デザイナーが考案した半透明の背景を作成することはできませんでした。 そして、必要なインデントが作成されたときに、3番目のものが機能しなくなりました。 彼は要素がわずかに重なる必要がありました。



CSSの準備方法がわからない可能性があります。 しかし、私はすでに悲惨なドロップダウンにほぼ1日を費やしました。 恥！ 当然、私は自分ですぐにできると考え始めました。 最も難しい瞬間-マウスが一番上の行からドロップにドラッグするとき、それを失わないでください。 タイムアウトを気にする。 Y-s-s ...



音楽がアイデアとともに私にやってきた。 神聖なjQuery !!! それは、アニメーションなどのコアにそのようなものを持っています...思考-完了！ その結果、すべてのコードをプラグインまたは関数にスタイルする必要さえありませんでした。 すべては2つのHTMLタグで行われます。



<span

onMouseOver="$('#dropdown').stop().fadeIn()"

onMouseOut="$('#dropdown').animate({marginBottom:0},500,'',function(){$(this).fadeOut()})"

> ...touch spot...







...



<div id = "dropdown"

style = "display：none; position：absolute;"

onMouseOver = "$（this）.stop（）"

onMouseOut = "$（this）.animate（{marginBottom：0}、500、 ''、function（）{$（this）.fadeOut（）}）"

>

...ドロップダウンの内容...







ここでは、原則のみを示します。必要に応じて入力され、好みに応じて相互に配置される2つの主要な要素です。 マウスをドロップダウンゾーンに移動できるように、500ミリ秒（0.5秒）が指定されています。 目に見えない不必要なものをアニメーション化するためのアニメーションmarginBottom。 アニメーション自体から、それを完了する時間だけが必要です。



原則として、この方法ですべてのメニューを作成できます。 確かに、投資のレベルは1つだけです。 しかし、そのためには、奇妙な泥だらけのスタイルのプラグインや手順はありません。 早くて汚い！