jQueryを使ったドロップダウンメニューの作り方 – creamu
woorkで、jQueryを使ったドロップダウンメニューの作り方が紹介されています。 ↑のようなシンプルで必要充分なメニューですね。マウスオーバーするとメニューの背景色が変わったり、レイアウトもかっちりしているので使いやすそうです。 HTML / CSSとjQueryのコードが公開されていますね。 デモは以下から。 » demo here 参考にしてみてはいかがでしょうか？ » How to implement a perfect multi-level navigation bar ブログのデザインリニューアルしたくなってきたぞ。MT5にするタイミングで、とか考えてたけど、ささっとやっちゃおうかな。
セクシーなドロップダウンメニュー実装サンプル:phpspot開発日誌
Sexy Drop Down Menu w/ jQuery & CSS | Noupe セクシーなドロップダウンメニュー実装サンプル。 次のような、セクシーかどうかはさておき、クールなメニューのサンプルが公開されています。 CSSで綺麗にレイアウトして、jQueryで実装したものです。 マウスオーバーで光る高級感がナイス 矢印↓ボタンを押した時にちゃんと凹むのもいい感じ。 タグ構造も結構綺麗に定義できてレガシーなブラウザ（ＩＥ６）にも対応しているっぽいのでなかなかオススメです。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル
PSD navigation menu | PSDgraphics
PSD navigation menu 10 unique website navigation menus with a rounded corners, for your web project. Used glossy style. All menus are editable, you can easily update color, change the size, remove text and export it in a necessary file format. Rollover states are in their own layers. Full preview Resolution: 962×46 px Size: 651 KB Format: Photoshop PSD Color theme: black, grey, blue, green, red, o
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
CSSとHTMLで作るシンプルなサブメニュー付きメニュー「 Pastel color menu」
メニューはサイトないで最も多く使われ、見られている重要な要素の一つだと思います。今日紹介する「 Pastel color menu」はサブメニューが付いた、シンプルでデザイン性、汎用性の高いナビゲーションメニューです。 デザインはCSSで制御されているので、ベースとして利用してカスタマイズすることも容易にできるかと思います。サブメニューの表示にはjavascriptを使っているみたいです。 詳しくは以下 実際の動作デモは「Live Preview」から見ることができます。 サンプルは「Download source code」というテキストリンクから必要な画像などを含めてダウンロードすることができます。ソースにたいしての詳しい解説は「 woork: Pastel color menu with dynamic submenu using CSS」でされていますので、若干javascript
WordPressの管理画面のナビゲーションをドロップダウンにするプラグイン -Admin Drop Down Menu
planetOzhのエントリーから、WordPressの管理画面のナビゲーションをドロップダウンにするプラグイン「Admin Drop Down Menu」を紹介します。 WordPress Plugin : Admin Drop Down Menu Admin Drop Down Menu 2.1の対応環境は、WordPress 2.5+となっており、日本語環境の当サイト（WordPress 2.5.1）でも文字化けすること無く使用できました。 プラグインのセッティングは簡単で、ダウンロードした「ozh-admin-drop-down-menu.zip」を解凍し、フォルダごと「/wp-content/plugins/」にアップロードします。 あとは、管理画面のプラグインから「Ozh' Admin Drop Down Menu」を「有効化」すると、管理画面のナビゲーションがドロップダウンに
メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル:phpspot開発日誌
jQuery Content Slider Tutorial メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル。 ナビゲーションメニューをクリックで、コンテンツブロックをズイっとアニメーションさせながら切り替えるサンプルです。 デモページ を見るとその動きが分かります。 ウェブサイトのヘッダー部分に置いておくと、カッコいいだけでなく、ページ遷移なしでヘッダー部分を切り替えることが可能です。 企業用のページなんかでよくある構成ですが、そういったサイトの制作時に使えそうですね。 jQueryベースで動作するみたい。
サイトにクールなポップアップのAjaxメニューをつけられる「PodiPodi」
キーワードは「Shift + Space」。コマンドを打つとその語句を含むメニューが現われます。コマンドは半角英数のみで実行可能ですが、それでもなかなかのもの。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! クールなAjaxメニューをつけられる「PodiPodi」 ここをクリックしてもメニューが出てきます。 メニューに設定可能なもの 「Shift + Space」を押した後に下記コマンドに含まれる語句を一字だけ半角英数で入力すると出てきます。 コマンド：Bookmarks あらかじめ設定したサイトへのリンク一覧を表示できます。 コマンド：Creditsあらかじめ登録した内容を表示します。 コマンド：Tell a friend友達にこのサイトをメールで教えてあげることができます。 コマンド：You
[JS]タブを上下にアニメーションで切り替えるナビゲーションのチュートリアル
NETTUTSのエントリーから、タブを上下にアニメーションで切り替えるナビゲーションのスタイルシートとjQueryを使用したスクリプトの紹介です。 タブ型のインターフェイスとしては、ちょっと珍しい動きをするナビゲーションです。
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
leigeberのエントリーから、ドロップダウンメニューをスムーズに開閉する、1.8KBの軽量のスクリプトを紹介します。 Sliding JavaScript Dropdown Menu デモページ スクリプトはjQueryやPrototypeなどの他のスクリプトに依存せず、単独で動作するもので、対応ブラウザはIE6, IE7, IE8, Firefox, Opera and Safariとなっています。 ドロップダウンメニューはリスト要素で実装されており、項目はテキストなので日本語で実装することも可能です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
[CSS]シンプルでスタイリッシュなナビゲーションを実装するチュートリアル
CSSで作られた120のメニューサンプル | Designing Solid
20個のスタイルシートで作られたメニュー | Designing Solid
角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About![角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e3ad433daeb1ba25ad4d76ff7b050a2ac61043c/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F7%2F0%2Ftopimg_original.png)