ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na

jBar Plugin, the jQuery call to action bar : Todd Motto: Front-End Web Developer & Graphic Designer in Wiltshire, UK. ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」。 初期化すれば、次のようなつまみが現れて、クリックするとバーが現れるというインタフェースが簡単に実装できます。 一見シンプルなすっきりしたサイトだけど、ナビゲーションもちゃんと機能する、みたいなサイトを作りたい時に有効かも。 使い所は色々考えられますね。使い方次第では便利なサイト作りに役立ちそうです。 関連エントリ スマホタッチでくるくる回転させられるjQueryプラグイン「Touchy」。 折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timelin

30 Creative Websites With Unusual Navigation | OurTuts.com ナビゲーションが斬新な３０のサイト。 ナビゲーションというと一般的なデザインのパターンは決まっていて、それはそれで使いやすくていいんですが、ナビゲーションにも個性と面白さを出したいという際に参考にできるかも。 あまり他で見ないような斬新なナビゲーションを頭の片隅においておくと、いざ変わったものを作ろうと思った時に製作のヒントとなるかも 利便性も個性も兼ね備えたナビゲーションはPinterestのように広く使われるようになっていく気がしますね。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 綺麗にデザインされたピクトグラムアイコン100個セット Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」

水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。 Kwicks for jQuery Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。 Kwicksのデモ Kwicksの使い方 Kwicksのデモ デモでは6種類のKwicksの動作を楽しめます。 対応ブラウザは、IE7+, Firefox3.6+, Chrome12+, Safri5+, Opera11+です。

スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 2012年05月17日- ddSlick - a jQuery plugin for custom drop down with images スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」。 タップすればリストが開いてアイテムをクリックすると選択できるというウィジェットを簡単に実装できるプラグインです。 デモではソーシャルサイトの選択という感じになっていますが、色々応用ができそうです。 スマホのメニューとして使ってもよさそう。アイテムの内容には画像、タイトル、デスクリプションが含まれますが、これら値はJSONで渡せます もちろんPCサイトでも使えますね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Pr

DropKick - a jQuery plugin for beautiful dropdowns スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」。 次のような白と黒のデザインでドロップダウンを実装できます。単なるselectボタンを $('.default').dropkick(); な感じで初期化してあげるだけで簡単。 黒のピカピカした感じもいいですが白のプレーンなデザインもいいですね カスタムテーマをCSSで作ることもでき、作り方はページ内で解説されています 関連エントリ 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームをカッコよくするjQueryプラグイン集１５ フォーム要素をクールにするためのjQueryプラグイン集

Simple Drop Down Menu with Jquery and CSS シンプルだけどデザインがよいドロップダウンメニュー実装チュートリアル 未オープン状態の場合はテキストっぽく表示されて、クリックするとホバーされるメニューの実装チュートリアルです。 クリックするとホバーされてメニューが表示されます。 マークアップは以下のようにシンプル。 idを付け替えつつ、show() hide() しているだけなわけで、大層なことはやっていないわけですが、似たようなものを作る際の参考に使えそうでしたのでご紹介 関連エントリ フリーのCSSメニューテンプレートとチュートリアル集 CSSのナビゲーションメニューサンプル５５

リスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。 HorizontalNav [ad#ad-2] HorizontalNavのデモ HorizontalNavの使い方 HorizontalNavのデモ 水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。 デモ：480pxで表示 上：未適用はが成り行きで二段になってしまう幅になっても、下：適用の見た目は損なわれません。 HorizontalNavの使い方 実装は4ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//aja

PathっぽいUIをCSS+JSで作るための解説記事「CSS で作るスマートフォン向け片手操作メニュー」 Tweet 2012/3/6 火曜日 matsui Posted in デザイン, 記事紹介・リンク | No Comments » スマホ向けの面白いUIの作り方を解説したエントリーがありましたのでご紹介します。 片手持ちした際に便利なPathっぽいメニューを、CSS+JSだけで実現するためのチュートリアル記事です。 →　WWW WATCH　CSS で作るスマートフォン向け片手操作メニュー [hyper-text.org] 左下のアイコンをタップすると、 クルクルっと回りながらメニューが出てきます。 サンプルはこちらのページから見ることができます。 （PCからもIE以外であれば、ほとんどのブラウザで見ることができるようです） 親切に解説されているので、わかりやすいですね。 すごく目を

画像を一切使用せず、CSS3や擬似要素を使ったリボン風デザインのナビゲーションを実装するチュートリアルを紹介します。 CSS Ribbon Menu [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーションに対応したブラウザ、Chrome, Safari, Firefoxでご覧ください。 CSS3アニメーション非対応のIE8/9ではアニメーション無し、擬似要素非対応のIE7ではリボン無しになります。 デモページ [ad#ad-2] 実装 HTML HTMLはシンプルで、各アイテムをspan要素で実装し、全体をdiv要素で内包します。 <div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>About</span></a> <a href='#'><span>Services</span></

デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pageslide.min.js"></script> JavaScript PageSlideさせる要素を指定します。 <script type="text/javascript"> $('a').pa

jOrbital - jQuery round menu 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」 ソーシャルボタン限定というわけではなさそうですが、ボタンにカーソルを合わせると円形にメニューが広がる物が作れます カーソルを合わせるとアニメーションしながら円形にソーシャルボタンがカッコよく現れます 個人的に、なんかつい押したくなるデザインだなと思いました。 ボタン部分のマークアップも次のように見やすいです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラ

Pretty Pie Menu Demo ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」 次のような円形のメニューを実装できます。アニメーションがカッコいいので実際に見てみましょう デモページ 使い方は以下のようにオプションを渡すみたいです。画像は自分で作れるので画像を変えれば全く印象の違ったものを作れそうです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 折り畳み可能なシンプルツリーメニュー実装jQ

色んなサイト見てると、本当色んなドロップシャドウかけてるんで、じゃあどういうのが見てて気持ちいいかなーと思って色々とやってみました。 サンプル作ったは良いけど持っててもアレなんで、PSDをZipで固めて置いておきます。 お好きにどうぞ。※PSDダウンロードは最下部にあります。 普通のドロップシャドウ。 普通ですね。ほんと、普通です。 両端めくれ上がってる系。 よく見られますよね。紙なんかの表現の際はけっこうリアルに見えますよね。 より、めくれちゃってる系。 もう少し立体感を出したタイプですね。照明が強めなイメージ。 使い所が意外に難しい。 真ん中が浮き上がってる系。 うちのトップページでも使ってます。 個人的にはセンター合わせの際にバランス取りやすいかなーと思って。 なぜか浮いてる系。 平面で、なぜか浮いてる感じ。 あんまり好きじゃないかも・・・ くっきりシ