初心者でもすぐできるスマホ対応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
【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 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
