以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題してjQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたがそれを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。jQueryでマウス動作が止まった…

スクロールすることによってサイドカラムに配置しているナビゲーションメニューを画面上部に固定してスクロールに合わせて追従させる動作はよく見かけますがだいたいが画面上部に固定のみ、もしくは画面下部に固定のみ、といったものが多くブラウザウィンドウの高さよりもナビゲーションメニューの高さが大きかった場合にはナビゲーションメニュ…

少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなくハンバーガーメニューボタン…

レスポンシブサイトでメニュー等のナビゲーションを扱う際、PC向けレイアウト時にはボタンをページ上に並べ、スマートフォン向けレイアウト時にはボタン一式を折りたたんでハンバーガーボタンでメニューを開閉させるUIにすることでスマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。そんなレスポンシブ対…

レスポンシブ対応を求められるWebサイト制作ではナビゲーションメニューの構成について何かと気を使わなくてはいけない点が出てきます。ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルがそこそこ溜まっていたので11種類ほどま…

以前もボックス要素を分割させる「ボックス要素を分割アニメーションによって切り替え表示するjQuery「Moving Boxes Content with jQuery」」を紹介しましたが同じようにナビゲーションメニューボタンをクリックすることで小さく並べたボックス要素をバラバラに分割アニメーションさせてコンテンツ遷移す…

Webサイト上で重要な役割を持つナビゲーションメニュー。ページデザインをする上で、ボタン素材のテンプレート集などは良くありますが、ナビゲーション全体のデザインテンプレートを36種類まとめたエントリー「36 Best Menu Designs Template」が参考になりそうなデザインがたくさんあったのでご紹介。36 …

全体の動きが凝った演出になっているわけではないのですが、ナビゲーションメニューと連動して背景画像がスライドして切り替わる動きが綺麗な「Sliding Background Image Menu with jQuery」のご紹介。Sliding Background Image Menu with jQuery | Co…

昨年（2010年）に、サイト制作で役立ちそうなjQueryプラグインをまとめて紹介している記事を、自分用にメモっていたものが、まとまりきらなくなってきたので、ここに一部まとめて紹介してみます。jQueryを使ってサイトに華やかな演出を加えたり、UIを勉強するために役立ちそうなサイト（ブログ）のまとめ。60 Useful…

ボタンをクリックすることでドロップダウンに近い要領で隠れているコンテンツ要素をフェード付きの回転アニメーションで展開させるjQueryプラグイン「MobilyBlocks」の動きがおもしろかったのでご紹介。≫mobily.pl - playground - MobilyBlocksDEMO動作は下記から。（それぞれ２つ…