[JS]スタイリッシュなボタンを画像を使用しないで実装するスクリプト -styledButton
Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。 jQuery imageless buttons a la Google デモページ サポートしているブラウザも多く、下記の通りです。 Opera 10 beta Opera 9.6x Firefox 3 Firefox 2 Safari 4 Safari 3 Internet Explorer 8 beta Internet Explorer 7 Internet Explorer 6 Chrome Adobe AIR 1.5+ 実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。 UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。 styl
[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大） ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト
ナビゲーションの現在位置を取得し、要素にクラス（activeなど）を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
[JS]ドリルダウンやフライアウトなど、アニメーションのエフェクトを持つナビゲーションのスクリプト -fg.menu
iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。 Dropdown, iPod Drilldown, and Flyout styles demo: drilldown 上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。 パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。
アニメーションするクールなアコーディオンUI実装用JSライブラリ:phpspot開発日誌
Animated JavaScript Accordion V2 - Web Development Blog This lightweight (1.3 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th.アニメーションするクールなアコーディオン実装用JSライブラリ。 次のようなアコーディオンUIを実装できます。 デモはこちら アニメーションがなめらかでカッコいいです。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」
JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」:phpspot開発日誌
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil... 次の記事 ≫：インターネット越しにWiiリモコンを操作できる「Wiimote-over-HTTP」 Dynamic Drive DHTML Scripts- Simple Tree Menu This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree! JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」。 次のようなHTMLがあったとすると、 <ul id="treemenu2" class="treeview"> <li>Item 1</li> <li>Folder 1 <ul> <li>Su
クールに回転するJavaScriptメニュー「mooVRotatingMenu.js」:phpspot開発日誌
mooVRotatingMenu menu tournant sur lui-me gre ・mootools et au whisky クールに回転するJavaScriptメニュー「mooVRotatingMenu.js」 マウスカーソルを合わせるとクルクル回転するメニューが作れます。 HTML的には下記のようになるみたい。 <div id="HorizMenu"> <a href="#" class="mooRotate rotateHome rotateSound"><span>Home</span></a> <a href="#" class="mooRotate rotateMoo rotateSound"><span>Mootools</span></a> <a href="#" class="mooRotate rotateWork rotateSound"><span>Wo
タブ式のスライドウィジェットを簡単作成できるjS「jFlow」:phpspot開発日誌
jFlow 1.2 - The Ultra-lightweight Fluid Content Slider for jQuery | Keansphere jFlow is a widget to make your content slides. タブ式のスライドウィジェットを簡単作成できるjS「jFlow」 単なるタブＵＩではなく、ページの切り替えにスライドアニメーション機能を加えたというもの。 デモはかっこうわるいプレーンな感じですが、CSSでデザインすれば使えそうです。 利用にはjQueryが必要。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」 jQueryでクールにアニメーションするメニューを実装するチュートリアル
右クリックメニュー等コンテキストメニューをカンタン作成ＪＳ「jContext」:phpspot開発日誌
jContext 1.0 - The ultra-lightweight right click context menu for jQuery | Keansphere 右クリックメニュー等コンテキストメニューをカンタン作成ＪＳ「jContext」。 次のような独自右クリックメニューをカンタンに実装できるようです。 初期化は以下のようにＪＳでシンプルに。 $(obj).showMenu({ opacity:0.8, query: "#myMenu2", zindex: 2000 }); マークアップも次のように直にＨＴＭＬが記述できて便利。 <div id="myMenu2"> <ul> <li><a href="#">Create New Class</a></li> <li><a href="#">Delete Class</a></li> <li><a href="#">Get a
アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」:phpspot開発日誌
アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 2008年04月30日- Sliding JavaScript Dropdown Menu - Web Development Blog This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 デモページはこちら メニューの中身は単なるul li
ライブドアブログ｜無料で豊富な機能が充実
RF1のこれがあればパーティーテーブルっぽくなる！長女誕生日の夜ごはんと美味しいカフェご飯を再現。高校生の誕プレが豪華・・・
横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳
横にスライドするアコーディオンJavaScript 横に伸縮するメニューです。 何かと使えそう。 詳細は以下に。 早速ダウンロード dev.portalZINE | jQuery - Horizontal Accordion 一番下にある ○で囲った部分からダウンロード。 本当はblade_sel.pngという画像がメニューのボタンに挿入されるはずなんですが、私のブラウザではなぜか表示されませんでした。 この動きは非常に素敵なので、一度はウェブサイトに導入してみたいものですね。 Jsファイルの呼び出し <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="lib/ifx.js"></script> <script type="text/javascri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]動的にタブコンテンツを生成するスクリプトのチュートリアル
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
[JS]シンプルなタブを実装する超軽量（5KB）のスクリプト -SimpleTabs
Michael Leigeber
http://youmos.com/news/accordion_js
bizcaz.com
ウインドウの横に隠れるサイドナビゲーションJavaScript （side-bar.js） - youmos