2011-01-10 23 views
0

私はhttp://codeigniter.com/user_guide/にある上部の「目次」ドロップダウンに似たものを見つけようとしていますが、jQueryについてはそうです。そのサイトはムーツールfxライブラリを使用しているようです。誰かが同じメニューを同じスライド効果を達成するために同じことまたは簡単なJavaScriptコードを行うjQueryのための既存のプラグインを知っていますか?Javascriptのスライド・ダウン・メニュー

+0

うわー...私はそれを考えなかったとは思えません...私はslideDown API先日... – Bot

答えて

4

これはコアのすぐそこです。 http://api.jquery.com/slideDown/。リンクのonclickイベントでその関数を呼び出すだけでよいです。

$('a.expand').click(function() { 
    $('#toc').slideToggle(); // slide up if down, down if up. 
}); 
1

あなたは、このリンクをチェックアウトすることができます -

http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/

あなたも、より多くのためにグーグルことができます。それらの多くは利用可能です。

+0

これは素晴らしい選択肢です。私はトップのページがページを動かさないという事実が好きです。 – Bot

1

jQueryの.slideDown()および.slideUpメソッドを使用できます。

http://api.jquery.com/slideDown/

しかし、あなたはおそらくslideDownにコールバック関数を持つAjaxでオンザフライで呼び出したい、そのメニューと同じ大きさの何か。

編集:AJAXでメニューを呼び出すことをお勧めする理由は、キーボードユーザーがタブを通過できる約100のリンクを画面に表示することによって、ユーザビリティ/アクセシビリティの問題が発生するためです。キーボードのユーザーは、すべてのオフスクリーンリンクを介してタブを開き、最終的にメニューをアクティブにする「目次」リンクに行き、次にタブを自分が望むものに戻すことができます。メニューはすでにJSで動作しません。 (下の目次ページへのリンクがあります)。したがって、AJAXでメニューを呼び出すと、focus()の最初のリンクを与える方がはるかに良い解決策です。

+0

あなたはAjaxリクエストであなたのメニューとして重要なものを持っていることは間違いありません! Googleだけでなく、JSを有効にしていないユーザーもサイトを閲覧することはできません。 – Bjorn

+0

@Bjorn。私は編集の完全な説明を、なぜこの場合リンクの量のせいで動的メニューの使用を推奨するのかという理由で追加しました。 – Terminalpunk

+0

私はまだ同意しません。それらのリンクに適切なタブインデックスを追加する必要があります。もっと重要なものが最初に表示されるか、メニューをHTMLソースの下に置きます。 JSをオンにして、JSをオンにして非表示にして、JSなしのpplが実際にそれを見ることができるようにしてください。 – Bjorn

2

正確な効果を得るには、slideToggle()関数をjQueryに組み込むだけで済みます。

$('#toggleButton').click(function(){ 
    $('#tableOfContents').slideToggle(); 
}); 

目次をラップして、それを有効にするにはリンク/ボタン/任意の幅id = "toggleButton"が必要です。しかし、ボタンが目次の外にあることを確認してください!

+0

CSSを使用してページに 'display:none'を追加するのではなく、JSを使用して目次を非表示にすることを忘れないでください。この方法では、ユーザーがJSを持っていない場合、コンテンツは可視になります –

0

はい、それはmootools Fx.Slideです。 jQueryでは、slideDown(http://api.jquery.com/slideDown/)を使用する必要があります

関連する問題