問題タブ [off-canvas-menu]

私の Web サイトには、10 セクションからなるかなり長いケース スタディ ページがあるため、ページの各セクションへのリンクを含む水平メニューを作成したいと考えています。ユーザーは、通常はビューポート キャンバスの外にあるリンクにアクセスできるように、小さな画面のデバイスでこれを水平方向にスワイプできます。

そのすべてを達成する方法は理解していますが、必要なのはこれです。ユーザーが下にスクロールして 5 番目のセクションに到達すると、メニュー リンクが右側のキャンバスからわずかに外れます。メニューは十分に左にスライドし、リンク アイコンがビューポートに表示されて左端で停止します。これにより、そのリンクから続く他のリンクもキャンバスに表示されます。

ただし、問題は、transform: translate(X) 値を割り当てるクラスをスクロール メニュー コンテナに追加すると、ユーザーが特定のセクションに到達したときに左にアニメーション化されるため、メニュー全体がその時点で修正され、それがユーザーが手動でメニューを前後にスワイプして、その時点から必要なメニュー リンクにアクセスすることはできません。

また、同じことが逆に発生するようにしたいので、上記がトリガーされてメニューが左に移動した後、ユーザーがページを上にスクロールして最初のメニュースライドアクションをトリガーしたセクションを過ぎたときに、右にスライドして元の位置に戻ります。

メニュー スライドがトリガーされるこの動作は、ユーザーがいずれかの方向 (上または下) に特定のポイントを過ぎてスクロールするたびに発生する必要がありますが、ユーザーはいずれの方向にも手動でメニューを任意のポイントにスワイプできる必要があります。

これはすべてJavascriptを使用して可能でなければならないことを知っていますが、メニュー内の1つのIDに割り当てるとメニュー全体がスライドしないため、element.scrollintoViewを含むさまざまなアイデアを試しました。また、アニメーション化されたクラスを追加してメニューを移動しようとしましたが、それもうまくいきませんでした。

アップデート：

コードペンで基本的な例を作成しました：

https://codepen.io/creativezest/pen/MWyqPYL

ページが #about セクションまで下にスクロールされたときに、メニューを左にスクロールして、下部メニューの「about」リンクがビューポートの左端にスライドするように、JavaScript を追加したことがわかります。しかし、それは機能していないようです。

以前の投稿で説明したように、これは私が達成しようとしているものであり、メニューを後方にスクロールして、ユーザーが過去にスクロールしたときに「ホーム」リンクがビューポートの左端の元の位置にあるようにすることです#about セクション。

また、上記の動作が発生した後も、ユーザーが手動でメニューを左右にスワイプできるようにする必要があります。

誰でもこれについて何か助けていただければ幸いです。

どうもありがとう。

マルク

オフキャンバス ナビゲーション メニューは、デスクトップ ビューのタブインデックスで認識されています。そのため、ユーザーがデスクトップで表示している場合、アクセシビリティのために必要な「メインにスキップ」をタブで移動します。しかし、ページのロゴにたどり着く前に、8 つの非表示リンクをタブで移動します。

このサイトは Zurb Foundation オフキャンバスを使用しています。

このスレッドで推奨されているように、キャンバス外のリンクに tabindex="-1" を追加してみました。これによりデスクトップの問題は解決されますが、リンクが代わりにタブ化されないため、キャンバス外の問題になります。

表示されているナビゲーション メニューのみをタブインデックス化する方法について何か考えはありますか?