私はhttp://codeigniter.com/user_guide/にある上部の「目次」ドロップダウンに似たものを見つけようとしていますが、jQueryについてはそうです。そのサイトはムーツールfxライブラリを使用しているようです。誰かが同じメニューを同じスライド効果を達成するために同じことまたは簡単なJavaScriptコードを行うjQueryのための既存のプラグインを知っていますか?Javascriptのスライド・ダウン・メニュー
答えて
これはコアのすぐそこです。 http://api.jquery.com/slideDown/。リンクのonclickイベントでその関数を呼び出すだけでよいです。
$('a.expand').click(function() {
$('#toc').slideToggle(); // slide up if down, down if up.
});
あなたは、このリンクをチェックアウトすることができます -
http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
あなたも、より多くのためにグーグルことができます。それらの多くは利用可能です。
これは素晴らしい選択肢です。私はトップのページがページを動かさないという事実が好きです。 – Bot
jQueryの.slideDown()および.slideUpメソッドを使用できます。
http://api.jquery.com/slideDown/
しかし、あなたはおそらくslideDownにコールバック関数を持つAjaxでオンザフライで呼び出したい、そのメニューと同じ大きさの何か。
編集:AJAXでメニューを呼び出すことをお勧めする理由は、キーボードユーザーがタブを通過できる約100のリンクを画面に表示することによって、ユーザビリティ/アクセシビリティの問題が発生するためです。キーボードのユーザーは、すべてのオフスクリーンリンクを介してタブを開き、最終的にメニューをアクティブにする「目次」リンクに行き、次にタブを自分が望むものに戻すことができます。メニューはすでにJSで動作しません。 (下の目次ページへのリンクがあります)。したがって、AJAXでメニューを呼び出すと、focus()の最初のリンクを与える方がはるかに良い解決策です。
あなたはAjaxリクエストであなたのメニューとして重要なものを持っていることは間違いありません! Googleだけでなく、JSを有効にしていないユーザーもサイトを閲覧することはできません。 – Bjorn
@Bjorn。私は編集の完全な説明を、なぜこの場合リンクの量のせいで動的メニューの使用を推奨するのかという理由で追加しました。 – Terminalpunk
私はまだ同意しません。それらのリンクに適切なタブインデックスを追加する必要があります。もっと重要なものが最初に表示されるか、メニューをHTMLソースの下に置きます。 JSをオンにして、JSをオンにして非表示にして、JSなしのpplが実際にそれを見ることができるようにしてください。 – Bjorn
正確な効果を得るには、slideToggle()関数をjQueryに組み込むだけで済みます。
$('#toggleButton').click(function(){
$('#tableOfContents').slideToggle();
});
目次をラップして、それを有効にするにはリンク/ボタン/任意の幅id = "toggleButton"が必要です。しかし、ボタンが目次の外にあることを確認してください!
CSSを使用してページに 'display:none'を追加するのではなく、JSを使用して目次を非表示にすることを忘れないでください。この方法では、ユーザーがJSを持っていない場合、コンテンツは可視になります –
はい、それはmootools Fx.Slideです。 jQueryでは、slideDown(http://api.jquery.com/slideDown/)を使用する必要があります
- 1. JQueryスライド・ダウン・メニューの質問
- 2. CSSメニューとJavaScriptメニュー
- 3. メニューのサイドバーでスライドさせてスライドさせてください。html、css
- 4. ホバリングイベントのJavascriptメニュー
- 5. 古いjavascriptスライドショーwihtoutスライド(onclick)
- 6. リッチJavaScript DHTMLメニュー
- 7. ポップアップJavascriptメニュー
- 8. ChromeのCSSとjavascriptスライドの問題
- 9. Asp.NetとJavaScript:画像スライドの問題
- 10. メニュー項目ホバーJavaScript
- 11. jQueryメニューがiPad上でスライドすると画像が伸びる
- 12. mtvのようなjavascriptメニュー
- 13. JavascriptメニューOnBlurの問題
- 14. Javascript stickyメニューの問題
- 15. iOS別のビューの側面からUIView(メニュー)をスライドさせます
- 16. メニューが閉じたときに複数のdivをスライドさせる
- 17. MPMoviePlayerViewControllerのスワイプ・ダウン・ジェスチャー
- 18. jQueryでスライドアップ/ダウン
- 19. グレードアップ/ダウンAPL順
- 20. バイナリヒープヒューリスティックをダウン/シフトダウン
- 21. Javascriptの展開可能なメニュー - サンプルコード?
- 22. javascriptなしのスタイル選択メニュー
- 23. 垂直jqueryスライドを下にしてメニューを開いたままにする
- 24. GoogleドライブSDKのJavaScript:(x)のプレゼンテーション(Googleのスライド)
- 25. 春のセッション - Redisのは、ダウン
- 26. Javascriptのスライド画像ギャラリー、どうですか?
- 27. データ - 上からのダウン
- 28. のApp力がダウンsuddently
- 29. javascriptでメニューを作成する
- 30. javascriptでメニューを生成しますか?
うわー...私はそれを考えなかったとは思えません...私はslideDown API先日... – Bot