jQueryを使用した、マウスオーバーでメニューをバウンドして広げて表示するチュートリアル
言葉ではなかなか伝え方が難しいですが、マウスオーバー時に要素をストンと下に広げて表示し説明等をみせるようにするチュートリアルを参考にサンプルを作ってみました。動きはデモを見て頂いた方が分かりやすいですね。 参考記事の左の方の”Download”より、デモのファイルも丸ごとダウンロードできます。詳しく説明されていましたので、分かりやすかったです。 使い方のメモ バウンドするアニメーションの部分はjQuery Easing Pluginを使用していますので、別途ダウンロードします。 jQuery Easing Plugin HTMLの部分は、元の記事では下記のようにリスト形式でメニューを作り、P要素でメニューのデフォルトで表示する部分とサブテキストの部分とで分けています。P要素ではなくてもulでもよいです。 <ul> <li class="green"> <p><a href="#">Home
jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法 – bl6.jp
すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探している人なんかにはまさにといった感じかと思います。その名もFLEXSLIDER。しかも軽量なのがうれしいです。とても有名みたいですが自分は最近知りました…。以下、簡単な使い方です。 [ads_center] FLEXSLIDERの使い方 まずは下記サイトよりダウンロードします。 FlexSlider – The Best Responsive jQuery Slider head内でjQueryとプラグイン、そしてCSSを読み込みます。 <link rel="stylesheet" href="flexslider.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><
レスポンシブなコンテンツスライダー「FLEXSLIDER」jQueryプラグインの使い方とサンプル
FLEXSLIDERは、レスポンシブなコンテンツスライダーjQueryプラグインです。オプションの指定で縦方向へのスライドやマウスホイールでスライドするようにもできます。 オプションが沢山用意されているので、色々な表示の仕方ができそうです。ブラウザはSafari 4、Chromeの4 +、Firefox 3.6 +、Operaは10 +、IE7 +。 iOSとAndroidデバイスがサポートされているようです。 IE6で表示確認しようとしたら永遠に読み込みが終わらなくて、エラーで終了という形になりました。IE6だとページが全く見れなくなってしまうようです。（Adobe BrowserLabとIETSTERで確認しました。） ダウンロードとデモ デモとダウンロード→FlexSlider – The Best Responsive jQuery Slider ダウンロードできるファイルにデモフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
