[JS]現在位置のハイライトをアニメーションで移動させるナビゲーション -MagicLine

並列に配置されたナビゲーションの現在位置を明示したハイライトをアニメーションで移動させるスクリプトをCSS-Trickから紹介します。

デモのキャプチャ

jQuery MagicLine Navigation
デモページ

現在位置を明示するサインは、ライン(キャプチャ:上)と背景(同:下)の2種類が用意されています。
また、背景は各ラベルでカラーが異なります。

ナビゲーションの実装はリスト要素をdiv要素で内包したシンプルなものとなっています。

HTML

スクリプトのベースにはjQueryが使用されており、下記のスクリプトをプラグインとして記述します。

JavaScript

sponsors

top of page

©2018 coliss