jQueryでメニューを固定位置に追随させる：Live floating menu
twitter facebook hatena google pocket いろいろなサイトでメニューを固定＆追随させています。 今回はJavaScriptでこれを実現させてみます。 via：Live floating menu sponsors 使用方法 jQueryからjquery.jsとjquery.dimensions.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></script> <script type="text/javascript"> var name = "#id名"; var menuYloc = null; $(document).ready(
シンプル・軽量（2.2KB）・手軽なjQueryコンテンツスライダー・hash slider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よくあるコンテンツスライダーですが、 軽くて使いやすそうでしたのでメモ。 hash sliderは、わずか2キロバイト ほどの軽量スクリプトです。こういう のはいくつ覚えておいても損しない ですね。 軽い、というのは大事ですよね。スライドさせるとURL末尾に#～が付き、ここにリンクすることが出来ます。 シンプルです。マークアップも単純なので使いやすいのでは。 <div id="slider"> <ul> <li> example</li> <li> example2</li> </ul> </div> <div id="left"> goLeft </div> <div id="right"> goRight </div> <ul id="numbers"> <li
[JS]水平・垂直など多彩なデザインが可能なDock風ナビゲーションのスクリプト -jqDock
水平タイプ、垂直タイプなど多彩なデザインが可能なMac OS XのDock風ナビゲーションを実装するスクリプトを紹介します。 下記のキャプチャは水平タイプのもので上から、上揃え、中央揃え、下揃えとなっています。 jqDock デモ [ad#ad-2] デモでは、HTML5, XHTML 1.0(Transitional, Strict), HTML 4.01(Transitional, Strict)のDoctype有り・無しごとの動作確認ができます。 下記では、その多彩なデザインをいくつか紹介します。 左から、Sleep Slide（アイドル時にスライドで隠れる）、Colourise（カラー）、ClickFreeze（クリックで固定）、ラベル表示 [ad#ad-2] スクリプトのオプションも豊富で、下記にいくつか紹介します。 サイトのデモではこれらのオプションが簡単に試せます。 acti
シンプルだけど使えそうなドロップダウンメニュー実装jQueryプラグイン:phpspot開発日誌
Simple Dropdown List Plugin - Examples シンプルだけど使えそうなドロップダウンメニュー実装jQueryプラグイン。 次のような見た目で、クリックするとアニメーションしながら開くドロップダウンを簡単に実装できます。 クリックでアニメーションしながら開きます。 タグ的には<ul><li>のリストでアイテムを定義しておいて、$.simpledropdown(element); で初期化できるようです。 デフォルトのデザインはちょっとカッコ悪いですが、CSSでデザインを直せばそれなりに使えそうですね <select>じゃなくて、独自デザインで作りたい場合にサクッと実装できそうなので覚えておいてもよいかも。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 コンテンツがたっぷりつまって使
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易（高さ・幅・ボーダー・背景画像など） アクセシブルで、SEOにもフレンドリー。 さまざまな
jQueryを使った、動きのあるナビゲーションメニューチュートリアル集 – creamu
スムーズな動きのナビゲーションメニューを作りたい。 そんなときにおすすめなのが、『Excellent jQuery Navigation Menu Tutorials』。jQueryを使った、動きのあるナビゲーションメニューチュートリアル集です。 いい感じのものが揃っていますね。 How to Make a Smooth Animated Menu with jQuery マウスオーバーすると、すとんとメニューの説明を表示 Animated Drop Down Menu with jQuery クリックすると、すっとドロップダウン型で表示されるメニュー How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery HTML5,CSS3でのドロップダウンメニューの作り方 How to Build a Lava-Lamp Styl
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cro
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
House of Buttons: Archive
A collection of great UI buttons spotted in the wild. Curated by MaxButtons. Submissions welcome.
[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 最近存在を知ったのでメモ。 1ヶ月も前の情報ですけど、 今更ながらなかなか良さそう なプラグインです。cssメニュー でのマウスオーバーで使う jQueryプラグイン。 デモを見ていただいたほうが早そうですね。マウスオーバー時にリスト内に書いたdiv要素に切り替えつつドロップダウンさせるjQuery。なんとなく説明が難しい。。。 マウスを乗せると別の要素が滑らかに降りてきます。デモは画像不使用です。なかなか良いのでは。 IE6~8も動く事は動きますが、若干挙動が怪しい。。 [sexy-lightbox href=’/wp-content/demo/fluid-menu/fluid-menu.html?TB_iframe=true&height=650&width=9
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装したナビゲーションのテンプレート集 -Only Css Menu