« 2007年11月 | トップページ | 2008年1月 »

2007年12月の5件の記事

2007.12.29

JavaScriptでアコーディオンメニュー

画像を利用したスライドメニュー|imageMenu.js

またまた1月号のWeb creatorsからの使えそうなテクニックを…。
前回はFlashでauのオフィシャルサイトのようなアコーディオンメニューを作ってみましたが、今回はJavaScriptを使って同じようなモノを作ってみます。
サンプルはPhatfusionというサイトで確認するコトができます。肝心のJavaScript、imageMenu.jsのダウンロードページはないので、ブラウザにソースを表示してコピー&ペーストして下さい。
また、mootools.jsも必要なのでサイトからダウンロードします。その時、Core、Class、Class.Extras、Array、String、Function、Number、Element、Element.Event、Element.Filters、Element.Slectors、Fx.Base、Fx.Css、Fx.Elements、Fx.transitions<をチェックして下さい。

サンプルはこんな感じです。

続きを読む "JavaScriptでアコーディオンメニュー"

| | コメント (8) | トラックバック (0)

2007.12.17

auサイトのようなアコーディオンメニュー

Flash モーションライブラリ|Google Tweener

また今月のWeb creatorsからの使えそうなテクニックを…。
今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。
Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか?でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。
しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議?! 簡単に作れてしまいます。

サンプルはこんな感じです。

続きを読む "auサイトのようなアコーディオンメニュー"

| | コメント (27) | トラックバック (4)

2007.12.06

クリックでスライド表示するコンテンツ

タブメニューでスライドするコンテンツ|jQueryのCoda-Slider

今月のWeb creatorsは、「いま流行のWebデザインを身につける」と題して、いろいろと使えそうなAjaxやActionScriptを紹介しています。
まずは、タブをクリックするコトで、コンテンツをスライド表示させるjQueryのCoda-Sliderを紹介してみます。サイトから最新版のソースをダウンロードできますので、試してみて下さい。うまく作れば、こんなサイトも夢ではありませんよ!

映画やドラマで、刑事とか探偵が昔の新聞などをプロジェクタのようなモノに映して「ザッサー、ザッサー」と探し読みしている雰囲気がありませんか?(分かりにくい説明ですいません)

サンプルはこんな感じです。

続きを読む "クリックでスライド表示するコンテンツ"

| | コメント (0) | トラックバック (0)

2007.12.02

JavaScriptで階層型プルダウンメニュー

Ajaxで作る階層型メニューバー|SpryMenuBar.js

以前、「JavaScriptでプルダウンメニュー(DropDownMenu.js)」という記事をこのブログで紹介しました。するとこの前、階層を増やしたサンプルはできませんか?という問い合わせがあり、試しに作ってみたしだいです。

以前プルダウンメニューを作る際、実は右の本に出ていたSpryMenuBar.jsを使って作ろうと思っていました。ただ、CSSの設定が結構複雑でちょっと触るとレイアウトが崩れてしまうし、ウチの環境では、IE6で2階層目のメニューがズレて表示されてしまうので、別の方法で作りました。それが前回のDropDownMenu.jsを使った方法です。
しかし、DropDownMenu.jsで3階層目を作ろうとした所、結構大変だという事が分かり、もう一度、SpryMenuBar.jsに挑戦せざるを得なくなりました。
SpryMenuBar.jsは、Adobeが提供しているフレームワーク(Ajaxライブラリ)、Spryを利用します。今回はサイトから一式ダウンロードしなおして使ってますが、ダウンロードするには、AdobeのIDとパスワードが必要です。
また、Dreamweaver CS3には、標準で組み込まれているようなので、もっと簡単に設置できるのではないでしょう?(…いいなぁ)

サンプルはこちら

続きを読む "JavaScriptで階層型プルダウンメニュー"

| | コメント (7) | トラックバック (2)

2007.12.01

ポップアップ表示するツールチップ

jQueryのTooltip

Web creators 12月号に載っていたAjaxライブラリ、jQueryのTooltip.jsを紹介してみます。
ポップアップ表示するツールチップです。しかし、ウチの環境では本の通り作ってもIE6でうまく表示されませんでした。

下記のJavaScriptを外部ファイルにしているんですが、どうもそれがIE6ではうまく読み込めないようです。
なので、HTML内に直接記述しています。
$(function() {
/* Tooltipの表示をa.tooltipに限定 */
$('a.tooltip').Tooltip({
/* 表示位置の指定 */
top: 0,
left: 10,
/* タイトルと本文の区切り文字 */
showBody: "-",
/* URL表示ブロックの可視・不可視 */
showURL:false,
/* マウス移動時のTooltipの動き */
track:true
});
/* a.tooltipのクリック時、
href="#"によるアンカー移動をキャンセル */
$('a.tooltip').click(function(){ return false; });
});

また、本のサンプルではcssで透過処理をしていますが、それもIE6では不具合があるようです。
もう1つ、僕のサンプルでは背景に画像を使っています。ここでもIE6は不具合があって、うまく表示されなかったので不細工な感じで回避しています。まあ、実用にはもう少し試作を作ってみないといけないかなと…。

まっ、とりあえずサンプルはこちら

続きを読む "ポップアップ表示するツールチップ"

| | コメント (0) | トラックバック (0)

« 2007年11月 | トップページ | 2008年1月 »