ブログBlog

jQでのナビゲーション実装について

投稿日:2021年07月06日 トピックス

こんにちは、前田です。
ナビゲーションをホバーした際に、隠れていたナビの子要素メニューを表示するという仕組みを、あらゆるサイトで見かけます。
jqueryではそんなナビの仕組みを簡単に実装できる「slideToggle」いうメソッドがあります。
ただ、これは個人的な体験の上での感想ですが…。
業務上でslideToggleを採用しているナビの改修をした際に、特殊な状況(たとえば、画面の読み込み中にナビをホバーしたり)で意図しない挙動が起こったので、子要素の表示非表示は、同じ仕組みを実装できる「slideUp」メソッド+「slideDown」メソッドで記述してあげた方が無難なのかなと感じました。
更に、子要素のメニューが複雑な作りとなっている場合、cssのpointer-eventsを活用すれば、より安定感のあるナビゲーションを作成できるかもしれません。
PAGE TOP