初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
ドロップダウンメニューをスマートフォン・タブレットに表示させている場合、下層のメニューもうまくタップさせる方法【便利なjQueryプラグインがあります】｜今村だけがよくわかるブログ
ドロップダウンメニューをスマートフォン・タブレットに表示させている場合、下層のメニューもうまくタップさせる方法【便利なjQueryプラグインがあります】 ドロップダウンメニューがあるWEBサイトで「他のメニューも見ようかな～」と思ってスマートフォン・タブレットからタップすると「最上位のメニューしかタップできない・・・もっと下層のメニューを選びたいのに！」ってことがあります。 一瞬だけ下層のメニューが表示されるんだけど、最上位のメニューのリンクが効いてしまってページ移動してしまうんですよね・・・タップできない。 こんな状況。ドロップダウンメニューの下層のメニューをタップしたいんだけど・・・ 上の状況は、レスポンシブWEBデザイン（RWDって略されて呼ばれることもある）で作られているサイトでたびたびあります。PCの表示をNexus7,iPadなどタブレットの画面サイズに合わせて表示させている例
レスポンシブメニューを作成できるjQueryプラグイン｢MeanMenu｣
サイトをPC・タブレット・スマートフォンなどの端末に対応するためにナビゲーションメニューをレスポンシブ対応しました。その時採用したjQueryプラグイン｢MeanMenu｣をご紹介します。 必要なファイルと詳細はコチラ 下記リンク先からJavaScriptファイルやその他ファイルをダウンロードして下さい。 MeanMenu MeanMenuのデモサイトはコチラ ダウンロードファイルの使用方法 ナビゲーションメニューの表示に必要なコードは非常にシンプルです。 header <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>MeanMe
簡単！ヘッダーナビ等、現在アクセス中のページリンクにマウスオン効果をかける方法 | Stronghold Archive
どうもこんばんは。今回のtipsは【ヘッダーナビ等、現在アクセス中のページリンクをマウスオン状態にする方法】に関してです。かなり簡単に実装できますのでお試しいただければ幸いです。（2013年10月1日更新：jQueryで少し短めにしました) 絶対パスでの指定 コードもシンプルです。リンク内のURLと現在アクセス中のページのURLが一致したいる場合のみ【ON】というクラスを追加しています。リンクのつなげ方によって記述も変わってきますので、絶対パスでのハイライト方法と2種類のJSを用意しています。 CSS #menu a{color: #777} #menu a.on{color: #000} HTML <ul id="menu" class="cf"> <li><a href="http://abc.com/index.html">home</a></li> <li><a href="htt
レスポンシブWebデザインでブラウザの幅を狭めた時にメニューをアコーディオンにする方法
ブラウザサイズによってナビゲーションを変えいたい レスポンシブWebデザインはブラウザの幅によってレイアウトを変更できます。 その時にメインナビゲーションも押しやすい様に変更しますが、縦にズラーっと並んでしまうとスクロールする時にコンテンツにたどり着くまでに無駄に長くなってしまいます。 ブラウザサイズによってナビゲーションがアコーディオンの様に収まりがよくなると使いやすいかと思います。
【Labs】jQueryでスムーズスクロール
a要素のhrefの最初の文字が「#」で始まる内部リンクをスムーズにスクロールさせます。 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> HTML <a href="#hoge">Go to hoge</a><!--リンク元--> <div id="hoge">hoge</div><!--リンク先--> JavaScript $(function() { //移動するスクリプト $('a[href^="#"]').click(function() { var href= $(this).attr('href'); var target = $(
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
たったの10秒でできる！jQueryで実装する「ページトップへ戻るボタン」 - Kowappa
ページをスクロールするとフワッとフェードインする「ページトップへ戻るボタン」をたったの10秒で実装してしまいます。 今回ご紹介するものは、スクロールするとフワッとフェードインしてボタンが出てきて、ボタンを押すとスルスルッとページトップに戻るものです。とても10秒クオリティーとは思えないものなのでご安心を。 HTML <a id="pageTop" href="#contents">ページトップへ</a> CSS #pageTop{ background:#DDD; border-radius:5px; color:#FFF; padding:20px; position:fixed; bottom:20px; right:20px; } #pageTop:hover{ background:#EEE; } JavaScript <script type="text/javascript">
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌
Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ
jQuery で世界一簡単に画像を自動スライドすることができる jquery.simpleSlide.js
本当にスライドだけがしたい場合の jQuery のコードを書いてみました。ul と li で画像を並べるだけで、勝手にスライドが始まります。 基本的な使い方 HTML の書き方 以下のようにスライドしたい画像を並べます。 CSS は必要ありません、きっと jquery.simpleSlide.js が自動で設定してくれます。 id を slide にしておきますと、後々便利ですが、任意の名前でも結構です。 <ul id="slide"> <li><img src="image_01.png"></li> <li><img src="image_02.png"></li> <li><img src="image_03.png"></li> </ul> JS の読み込み simpleSlide() で起動します。 ページ末端に以下のようにコードを追加してください。 HTML の段階で、id 名
簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
