on:2012年6月21日sponsorsリスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。HorizontalNav[ad#ad-2]HorizontalNavのデモHorizontalNavの使い方HorizontalNavのデモ水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。デモマージン、パディング、ボーダーなどのスタイルは維持したままです。[ad#ad-2]HorizontalNavは、レスポンシブデザインにも対応しています。上:未適用、下:HorizontalNav適用です。上:未適用は各アイテムの成り行きのサイズで、下:適用は配置エリアのフルサイズで表示されます。配置エリアを狭くしても、同様です。上:未適用はが成り行きで二段になってしまう幅になっても、下:適用の見た目は損なわれません。実装は4ステップです。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。HTMLHTMLはシンプルなリスト要素です。CSSスタイルシートはスクリプトの動作には特に必要なく、単にデモで使用されている見た目のスタイルです。JavaScriptjQueryのセレクタでナビゲーションを指定し、スクリプトを実行します。{$('.full-width').horizontalNav({});});</script>スクリプトのオプションレスポンシブデザインの設定がオプションで指定できます。responsiveウインドウサイズが変更されると、自動でナビゲーションが最適化されます。デフォルト:trueresponsiveDelay最適化される際の待ち時間です。デフォルト:100オプションを使用すると、下記のようになります。Posts関連記事が見つかりませんでした。