Usage const slinky = $(…).slinky(options) Options Parameter Default Description
Slinky — rather sweet menus
Usage const slinky = $(…).slinky(options) Options Parameter Default Description
レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」 – bl6.jp
Greedy Navigationはレスポンシブ対応でメニューのアイテム数がわかりやすいナビゲーションを実装できます。ハンバーガーアイコンに切り替わったときに、ブラウザサイズに連動して表示されるアイテム数も切り替わっていきます。 言葉では伝えづらいので、まずはデモをご覧ください。 デモ PCで表示させた場合、ブラウザサイズを縮小していくと、それに合わせてハンバーガーアイコンのところにアイテム数が表示されます。この数のぶんだけドロップダウンメニューに表示されます。 縮小すればするほどアイテム数が増えていきます。ドロップダウンメニューにどのくらいの項目が存在するのか瞬時にわかるのでとても便利ですね。 たくさんナビゲーションメニューがあるときなんかに活躍してくれそうです。 というわけで、ユーザーにも優しいレスポンシブ対応のナビゲーションメニューを実装したい方は、ぜひチェックされてみてはいかがでし
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery基礎講座：ハンバーガーナビゲーション実装サンプル（ZIP付） | 株式会社パナレア
