2020年12月13日
項目数の制限を持たない水平メニューの構成とスクロールするスライダーの組み合わせて、いくつものパターンを作成して試してみた。その中で本編の組み合わせが一番シンプルで扱い易いものとして成立した。
本編はトップに水平メニューを配置し、jQueryを使ってマウス・ドラッグスクロールを可能にした。この結果、メニュー項目数の制限が無くなった。表示領域を超えた項目メニューをマウス・ドラッグスクロールもしくはスワイプして表示領域へ引き出し、選択したい項目をタップ(もしくはクリック)すると、スルスルとコンテンツスライダーがスクロールして表示される。メニューの下に配置したコンテンツスライダーはscroll-snapプロパティを使ってCSSだけでスワイプできるスライダーを作った。
マウス・ドラッグスクロールを実現するにはjQueryやJavaScriptを使うしか手が無い。「IT the best」のサイトに正に同様に動作するページがあったので有難く参考にさせてもらった。掲載されているものはスライダー本体をマウス・ドラッグスクロールするものだ。
2020年12月14日
通常の水平メニューで項目を順番に埋めていくと、直ぐに枠が無くなってしまう。モバイルのPortrait(縦)はもっと項目数が限定される。それ故、三本線「≡」のアイコンを使ったナビゲーションメニューが代表的になり、縦方向にメニューが展開される。
ここで考えたいのはもうひとつ、メニューの操作性を如何に使い勝手の良いものにできるかである。三本線「≡」のアイコンは一番目、二番目、三番目…と順番にタップ(またはクリック)するときに、毎回モーダルを開くというひと手間が必要であり、これは避けたいと考える。
メニュー項目数に制限を付けない、且つ操作性の良いもの、レスポンシブ対応、その解決策がこのマウス・ドラッグスクロール(スワイプ)メニューである
2020年12月24日
横並びにした要素の高さが自動で揃えるのは、Flexboxの特徴だが、タブスライダーの場合はコンテンツの高さに併せて高さを決定したい。
この場合、「display: flex;」を指定している親要素の箇所に「align-items: baseline;」を追記する。そうすると、各スライダーに収まるコンテンツの高さで表示される。
2020年12月24日
普通に横にメニュー項目を並べただけの簡潔なhtmlで構成。外部リンクや内部リンクが容易に実現できる。
2020年12月24日
「タブをアクティブにする」が間に合わなかった。Have a nice Christmas!