jQueryでアコーディオンメニューを作る | Hack
表示サンプルはこちら http://jsdo.it/goto_jp/xBHt 以前CSSだけで動くものを紹介しましたが、古いブラウザ対応ならjQueryを使った方が安定することも多く、AndroidだとCSS3のアニメーションが固くJavaScriptで動作させた方がスムーズなケースもあるため紹介します。 HTML <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="accordion"> <ul> <li> <span class="toggle">子項目ありメニュー</span> <ul> <li><a href="#">子項目</a></li> <li><a href="#">子項目</a></li> <li><a href="#">子項目</a
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
jQueryでロールオーバーのスクリプトを組んでみた - Wataame Frog
ちょっと仕事の状況が落ち着いたので、以前より興味のあったjQueryを真面目にやってみようということで、色々と試しておりました。 で、まずは「何か使えるものを作ってみよう」ということで、マウスオーバーしたら画像が入れ替わるスクリプトを組んでみました。 最終的に作りたかったのは、マウスオーバーで画像を切り替える際にパラパラさせるのではなく、フェードイン、フェードアウトをしながらふんわり変化するスクリプト。通称、ふんわりロールオーバー。 そこに行きつくために経た段階通りに記事を書いてみましたので、「jQueryなんてよくわからないよ！」なんて方もひと通り読んでみれば少しは理解できるかもです。 toogie自身も javascript は苦手でしたが、徐々にですが理解できてきています。眺めるだけでなく書くことは大切ですね、やはり。 あとは慣れ。 習うより慣れろとはよく言ったものですね･･･。 <
マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかも | 日刊ウェブログ式
jQueryとCSSで、ボタンがゆっくりと切り替わるチュートリアルです。とても簡単にできる上に、実用面での使い勝手も良いかもしれません。 まずは、こちらのデモをご覧ください Demo マウスオーバーでゆっくり画像が切り替わるのがお分かり頂けると思います。jQueryでシンプルに動かしています。 使用するには、以下のサイトからスクリプトやコードをダウンロードしてください。 Link もうそこにやり方が書いてありますが、一応チュートリアルです。 既存のブログなどに使用する場合は、 以下のコードを「head」内に書き込みます。 <link href="style.css" rel="stylesheet" type="text/css" /> CSSに以下の記述を追加 .button2{ background:url("images/download.png") 0 -45px; height:
プラグイン不要！たった数行でdiv要素にｊQueryLightBoxを実装する
プラグイン不要！たった数行でdiv要素にjQueryLightBoxを実装する 久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ！ DEMO jQuery あらかじめhead内にjQueryの読み込みだけはして下さいね。 $(document).ready(function(){ //show-panelボタンをクリックしたらLightBoxを表示する $("a#show-panel").click(function(){ $("#BlackWindow, #lightbox-panel").fadeIn(300);/*表示速度は数値を調整*/ }) //CloseボタンをクリックしたらLightBoxを閉じる $("a#close-panel
コメント欄を設置したった（Facebookコメントプラグインの使い方） - mmiyajix
Facebookのコメントプラグインを設置したのでメモ。 最近はブログなんかでも、コメント欄を自前で用意せずに外部のTwitterやFacebookなどのサービスを活用しているのをちらほら見かけます。今回はその流れにのってみようかと思います。 まあ下記アドレスからコードを生成するだけなんですが。http://developers.facebook.com/docs/reference/plugins/comments/ このコード中の fb:comments タグの href 要素に埋め込みたい先（どのページに対してのコメントなのか）のURLを指定する必要があります。自動でカレントページを指定してくれるわけではないので、こちらで指定しなければいけないんですが、HTML生成の段階でいちいち指定するなんてそんなの面倒ことするわけないですよね？ javascriptで適当に書き換えましょう。まず
fancyBox
Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea
fadeIn / fadeOut するコンテントスライダーを自作する | DriftwoodJP
div スライダーともいうよう。 プラグインを使ったところ、ぶつかるところがありました。 bxSlider: レスポンシブコンテントスライダー | deadwood利用したい機能が限られていたので、チュートリアル見ながら自作した方が良いかもと探して、こちらで勉強しました。 jQueryで自作する時の考え方：スライドショーの作り方ソースHTML でスライド用の画像を並べておき、div で囲んでおく。 <div id="slideshow" class="slideshow"> <p class="boxes box1"><img src="/img/photo-01.jpg" alt="photo 1"></p> <p class="boxes"><img src="/img/photo-02.png" alt="photo 2"></p> <p class="boxes"><img src
| サイドメニューが下まで行ったらそこで固定するJS（jQuery）神戸ホームページ制作センター
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
jQuery – メニューをスクロールに付随させてみる | 1：n – DETELU Blog
最近国内のサイトでもちょくちょく目にするようになった「スクロールに付随するメニュー（「ユニクロ 特集／+J FINAL COLLECTION | MEN – ユニクロオンラインストア[store.uniqlo.com]」のページの少し下の方にあるメニュー一覧のような動きになるもの 2011年12月2日時点）」を実装してみます。 この実装はすごく簡単で、スクロール位置と固定する要素の位置を比べ、スタイルを書き換えるだけです。 jQuery メニューをスクロールに付随させてみるサンプル（headerFixedBoxを固定） jQuery メニューをスクロールに付随させてみるサンプル（asideFixedBoxを固定） サイドバーに固定要素を置く場合は、フッターにかぶってしまうことがあると思うので、それを回避するように条件を加えてみました。 $(function(){ floatBox("#he
【jQuery】ヘッダーを最上部に固定！｜合同会社チームサンタ
先日USJでハリーポッターのアトラクションがオープンしましたねぇ 私も早く行きたくてフォイフォイしてます。 さて、最近時間を見つけては使いそうなjQueryを集めていましたが、 今回はそんな中から割と使うことの多い「headerを上部に固定」するjQueryをご紹介。 常にheaderを表示させておきたい！ 縦に長いページの場合、画面がスクロールしてしまうとheader部分が隠れてしまい スクロールバーや「TOPへ戻る」のボタンで一度一番上まで戻る・・・なんて事が あるかと思います。（まぁ大体footerにもメニューがありますが） そんな時、常に最上部にheaderがあればサクッとページ遷移できますね。 サンプルソース ってことで、まずはjQuery部分から。 あらかじめjQuery本体は読み込ませておいてください。 <script src="//ajax.googleapis.com/a
スクロールしても固定表示されるヘッダーを実装する | FSFIELD Labs
JavaScript スクロールしても固定表示されるヘッダーを実装する グローバルナビなどが配置されているヘッダ部分を、スクロールしても固定表示されるようにする方法を紹介します。jQueryを使います。 最近増えてきた表現ですね。ナビゲーション部分が常に表示できるようになるので便利ですが、常に表示されるということはその分コンテンツ部分が狭くなるというわけで、デザインする際はその点を計算する必要がありそうです。 スマホでやると挙動がうっとうしかったので、やらないか、更なる改良が必要と感じました。 格納するファイル jquery.js 記述の仕方 HTMLの記述 <div id="navigation"> <ul> <li><a href="/">お知らせ</a></li> <li><a href="/">会社案内</a></li> <li><a href="/">Web開発室</a></
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
finefinefine.jp
