スタイルシートマニア

jQueryで作るナビゲーション | ホームページカスタマイズ Tips

すごく久方ぶりの更新です。
最近、企画だけやたらと盛り上がって自分のやるべきことをしないまま、最終的に無駄なものを作らされて、おもいっきり振り回されたあげく、ちゃんとお金を払わない人間にだまされてる今日この頃です。
こういう人間を見分けるにはどうしたらいいんでしょう!

そんなことはさておき!最近ナビゲーションのデザインやらレスポンシブルやらで悩んでいるときに見つけた便利なjQueryです。

Slidebars

slidebars1

横からにょきっと出てくるサイドバーです。
スマホサイトによさそうですね!

Demo | Source

Pushy

こちらも横からにょきっと出るタイプ。
注目すべきはコンテンツ部分にブラックのオーバレイをかけてナビゲーションを目立たせる優れ物!

Demo | Source

Slinky.js


THE なぞ!(笑)
スクロールすると見出し部分が付いてきます。
だ・け・ど!肝心のリンクがないのはなぜだ!
っというか、こんな感じでスクロールするごとにこんだけ積み重なったら見える部分がなくなって余計使いにくいし!(笑)
まあ、リンクは入れればいいと思うけど、もっとも使えないブラウザIEで使えないという(笑)
いよいよダメです!
まあ、たまにはこんなのもね!

Demo

jQuery pop menu

これは素晴らしい!
こういうポップアップナビをやりたかったんですよ!
Demo | Source

jQuery Square Menu


すごい!けど!何か足りない!
そんな感じの一品。

Demo | Source

Perspective page view navigation

どこかWindows8を彷彿とさせるように感じるのは僕だけでしょうか?
だけど、なかなかかっこいいです。
使いようによってはいい仕事しそう!
元に戻りたい時に表示されているスクリーンをクリックすると戻れるというのが分かりにくいかなぁっというのはありますが、こういうの好きです!

Deomo | Source

Naver


一見なんの変哲もないただのナビゲーションですが、実はレスポンシブ対応で縮小すると自動的にナビゲーションがスマホサイズ仕様になります。
これはコーディングが楽ですね!

Demo | Source

SlickNav

スマホ用のナビゲーションです。
びよんびよんっとなるギミックが楽しいスクリプトですね。

Demo | Source

SlimMenu

階層メニューが横に広がるタイプのナビゲーション。
確かに縦に長くなると少々うっとうしい感じになるので、スリムに見えますね。
しかし、階層が深くなりすぎて横にはいりきらなくなったらどうなるのでしょう!

Demo | Source

Horizontal Nav

横幅いっぱいに伸びて適度に各横幅を調整してくれるスクリプト
レスポンシブまで対応してたらよかったのかも・・・。

Demo | Source

Mmenu

こちらもスマホで使えそうな横からにょきっと出てくるナビゲーションスクリプト。
スワイプ対応でスマホサイトにはなかなかよさそう。
カスタマイズも簡単と書いているが、どうでしょう?

Source

Sidr

これは過去に使ったことがあるスクリプトですね。
なかなか良いんだけど、古いアンドロイドは未対応でした。

Menu Aim

こちらは、カーソルを合わせるとサムネイルが出てくるスクリプト。
すごいけど、多分使えない!
スマホにも対応みたいになっているけど、タップした時の挙動を確認していないので不明。
っというか、スマホはタップした時点でページ飛んじゃうからね。

Demo | Source

まとめ

スマホサイトで使うならjQuery pop menuやSlidebarsがよさげですね。
個人的にはPerspective page view navigationも使いようによってはいい感じがしそうな気がします。

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す