FastFind Menu This page demonstrates the ActiveSpotLight FastFind Menu Script. 階層的でクールなメニューを作るためのJSライブラリ「FastFind Menu」。 紹介サイト上、左上の[ Toggle Menu ] でデモが開きます。 メニューをクリックすると、階層的にメニューが開きます。 アニメーションも滑らかでカッコいいです。メニュー先はAjaxでオープンするようです。 Ajax にすることで、深い階層であっても一度に読み込ませることなく利用することが可能です。 こういった形式のメニューの需要もあると思うので、覚えておくとよさそう。 関連エントリ セクシーに動作するスライドメニューバー実装JSライブラリ

Sexy sliding JavaScript side bar menu using mootools at Andrew Sellick When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.セクシーに動作するスライドメニューバー実装JSライブラリ。 クリックするとニューっとアニメーションしてセクシーに開いてくれるメニュー実装のためのライブラリが公開されています。 デモはこちら CSSによってデザインできるので、デザインも簡単です。 ちょっと変わり種ということで、デザイン系のサイトで使えそうですね。

PopBox! - Javascript Image Magnification PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page.JavaScriptでの画像プレビュー自由自在「PopBox」。 ページ内の画像をクリックするとページ内でそのまま、アニメーションしながら拡大。 PopBoxを使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。

使い勝手がよくデザインもクールなエンタープライズWikiシステム「MindTouch Deki Wiki」 2007年11月04日- MOONGIFT: 実文句なしのWiki「MindTouch Deki Wiki」:オープンソースを毎日紹介 完成形を見てしまった気がする。それくらいできが良い。 使い勝手がよくデザインもクールなエンタープライズWikiシステム「MindTouch Deki Wiki」 PHP+MySQLで実装されているWikiです。 ざっと触ってみた感じですが、なかなか使い勝手がよく、高機能なWikiのようです。 ソースは圧縮して９ＭＢ。解凍すると３０ＭＢもあるみたいです。（画像など重いバイナリファイルも含みます） PHPだったらPukiWIkiという方も多いと思いますが、違うWikiにもトライしてみてはいかがでしょう？

jQuery: jqGalScroll 2.0 (Photo Gallery) | The Book and the Cover jQueryを利用したスムーズに動作する画像ギャラリー「jqGalScroll 2.0」 写真下部分の番号を押すとスライドアニメーションしながら写真が切り替わります。 HTMLソースは次のような感じにクリーンになります。 <ul> <li><img src="common/img/baby-02.jpg" alt="This is a baby" /></li> <li><img src="common/img/baby-03.jpg" alt="" /></li> <li><img src="common/img/baby-04.jpg" alt="" /></li> <li><img src="common/img/baby-05.jpg" alt="" /

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos. The Head

NYOKIGLITTER - Tab Styled Accordion アニメーションする面白いタブＵＩ実装JSライブラリ「Tab Styled Accordion」。 タブをクリックするとアコーディオン風にアニメーションしながらタブが切り替わります。 クリックすると驚きのアニメーション効果はこちら 訪問者に驚きの体験を与えたいという方は、一度使ってみましょう。

The First Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursu

jQuery Calendar The calendar can easily be added to an input field with appropriate default settings.jQueryを使ったカレンダー型、日付入力補完ライブラリ。 次のように、入力ボックスにフォーカスをあてると、カレンダーが表示されます。 スクリプトとＣＳＳの読み込みを行えば、「 $('input selector').calendar(); 」 のような指定で簡単にカレンダーを初期化できる模様です。 デザインもCSSで出来るみたいですね。 実装は簡単っぽいですし、jQuery をお使いの方はチェックしておいて損はなさそう。

You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! Many times I’ve been asked how I created my calendar, or asked me if they could use the code etc. That’s why I thought it might be interesting to write an article on how to create such calendar. The table element If you have already peeked at my code, you've seen that I've used the ta

A CSS styled calendar | Veerle's blog Many times I’ve been asked how I created my calendar, or asked me if they could use the code etc. That’s why I thought it might be interesting to write an article on how to create such calendar. CSSで美しくデザインされたカレンダーのCSSサンプル。 CSSで次のように美しくスタイルされたCSSサンプルが公開されています。 カレンダーのデザインって微妙に難しいのですが、このデザインはシンプルだけど綺麗にまとまっていて美しいですね。 カレンダー部分のデザインの参考にできそう。 あと、こちらのサイトでは、いろんなサイトのデザイ

Tag Cloudのスタイル タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。タグクラウドのCSSスタイルシートサンプル集。 色んなタグクラウドのサンプルが公開されています。 タグクラウドはよく使う部分ですが、スタイルが結構ややこしかったりします。 秀逸なタグクラウドが殆どなので、応用できそうですね。

Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi

Making ListBox with CSS CSSでクールなリストボックスを作るサンプル。 次のような、アイコン付きでチェックするとアイコンが変わるリストボックスが作れます。 実体は input type="radio" なのでフォームの送信も行うことが出来ます。 次のようなリストボックスサンプルも紹介されています。 ＵＩ 的に使い回しが利きそうなパーツなので、ユーザビリティ向上などのために覚えておいて損はなさそうです。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル

pForm - Free HTML Form Builder - Create Web Form Template Online クールなオンラインフォームをWEB上でジェネレートできる「pForm」 フォームのデザインを選んだ後は、 フォームのパーツをドラッグ＆ドロップで設置するだけ。 フォームを作ったら構成ファイルをダウンロードできます。 お手軽で便利ですね。さくっとフォームを仕上げたい場合に使えそうです。

サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ

MooTabs - Tiny tab class for MooTools MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it's main purpose is to help out with the creation of simple tab navigation.可愛くアニメーションするタブＵＩ実装ライブラリ「MooTabs」 タブ項目をクリックするとページがアニメーションしながら開きます。 動きが滑らかで、使っていてちょっと驚きで楽しいＵＩを提供できます。 CSSで綺麗にスタイルしても見栄えがしそうですね。 moo がついているので mooTools を利用しているのは言うまでもありませんね。

Creating Lightbox with Yahoo! User Interface Library : Code Central Yahoo! User Interface Library (YUI) provides a very handy class for creating modal dialog box with background masking, which can be used to create lightbox. YUIを使ってLightBoxを実現するサンプル。 YUIの「YAHOO.widget.Dialog」を応用してLightBox風なものを作るサンプルが紹介されています。 オンラインデモ Yahoo! UI Library: Dialog YUI使いな方には使えるサンプルかもしれませんね。