横から出てくるドロワーメニューの作り方
横から出てくるドロワーメニューの作り方 Publish Date: 2017.07.27 お知らせ ハンバーガーボタン×ドロワーメニューのテンプレートを作成しました。詳しくはこちら CSSのtransitionとtranslateを組み合わせます。 <button type="button" class="btn_menu"> <!-- ボタンの記述 --> </button> <nav> <!-- ナビの記述 --> </nav> nav { width: 312px; height: 100%; transition: all 0.2s; transform: translate(312px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #fff; } nav.open { transform
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! Features: Multi-level nested menus. 100% mobile responsive men
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
jQuery slimMenuの実装とデザインを修正する方法 | Peaceful Days
スマホ（スマートフォン）サイトの製作でUIを考えた際に 最近では定番化したドロワーメニュー（Drawer menu）が良さそうなので jQuery slimMenuを設置してみました。 その際の作業の流れが参考になればと思い記事にしました。 jQueryでいくつかあるようなので調べて jQuery slimMenuというのがイメージ通りの動きをするものでした。 以前一度下記のj-queryを使ったことがあるのですが 閉じる際にメニューボタンを押さないとコンテンツに戻れないので 理解していないユーザーに不親切なので今回は採用しませんでした。 ・Sidr – A jQuery plugin for creating side menus jQuery slimMenuですとたとえメニューボタンで閉じることが理解できなくても コンテンツを下に押し出す形でメニューがでるので、 閉じずに閲覧できユー
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単
Home › プログラミング › 【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単 フォームのエラーチェックでいちいち読み込みが走るのはサーバ側もユーザーさんもストレスかかりますよね？ クライアント側でリアルタイムにエラーを表示させることでフォームのコンバージョン率も上がるみたいですし、ユーザーさんのイライラも軽減できる。 これは導入しておいて損はないですね。 フォームエラーチェックのjQueryプラグインをいくつか調べましたが、その中でもポップアップでエラーを表示してくれる「jQuery Validation Engine」が気に入りましたので、その使い方を紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？
スクロール位置によってサイドバーを固定/解除させる jQuery実装方法
2012年の始めに【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法という記事を書きました。この記事で書いたのは、ヘッダーバーとフッターバーを対象にスクロール位置による要素を固定/解除する方法でした。当時はまだサイドバーを固定させるUIというのは主流ではありませんでしたが、昨年の後半から今年にかけていろんな所で見るようになってきました。 先日、1年前の記事でサイドバーを固定/解除させる方法についての質問もいただきましたので、その実装方法についてまとめてみたいと思います。このブログでも「サイドバーを固定/解除させている」ので、このブログを例に説明していきます。 ポイントは、以下の3つの値をどう取得するかということになります。この値さえ取得できてしまえば、あとはその値によってサイドバーを固定/解除するような命令を与るだけとなります。 スクロールトップの位置を
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
Slimbox 2 | Webサイト制作支援 | ShanaBrian Website
Slimbox 2の使用方法をご紹介しています。 Slimbox 2は別ウィンドウ（ポップアップ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 ダウンロードと設置 JavaScriptおよびCSSの読み込み 適用方法 キャプション オプション ダウンロードと設置 こちらからダウンロードして解凍します。 解凍後、css、jsディレクトリを任意の場所に設置します。 JavaScriptおよびCSSの読み込み 次のHTMLをhead要素内に記述します。 CSSファイルとJavaScriptファイルのパスは適宜変更してください。 HTML <link href="css/slimbox2.css" type="text/css" rel="stylesheet" m
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
スクロール時に画像の読み込みを開始する Lazyload | kazumich.log
今までの a-blog cms では jQuery のバージョンが 1.2.6 という事で、最新のプラグイン的なものが動作しないでいたので、あまり導入のチャレンジをしていませんでしたが、a-blog cms 1.3.0 になって jQuery も最新版になった事から気にせず使えるようになったのが、とても嬉しいですね。 今回のエントリーでは、jQueryのプラグインで見えてない部分は画像の読み込みをしないでおいて、スクロールして表示されるようになってから読み込む「Lazyload.js」というのを試してみましたので、その実装方法をメモっておきます。 以前は jquery.dimensions.js というものが必要だったようですが、jQuery に含まれる事になったようで、現在のバージョン(1.4.2) では読み込まなくても問題なく動作するようです。 Lazyload.js download
jqueryを効率よく学ぶ方法は？ - プログラミング学習の窓口
jQueryを学ぼうと思ってネット検索をしても、色々な情報が出てきてどの情報を参考にすればいいか分からないという経験をした方はいるのではないでしょうか。 特に独学で学ぼうとすると、その壁によくぶつかります。ドットインストールのようなメジャーなサービスも使ったことがなければ、その価値は分かりません。 そこでおすすめなのがプログラミングスクールの活用です。最初に何から学ぶべきかといった説明はもちろんのこと、キャリアプランまで相談に乗ってくれるので、ただ単に学んで終わるということが減らせます。 The post jqueryを効率よく学ぶ方法は？ first appeared on プログラミング学習の窓口.
画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」 – bl6.jp
画像の読み込みを遅らせて表示させることができるjQueryプラグイン「Lazy Load」を使ってみました。たぶん今後使いどころがありそうな感じです。色んなところでよく見かけると思いますが、スクロールをしていくとそれに合わせて画像も表示されていきます。ということで以下、使い方です。 [ads_center] 使い方 jQuery本体とダウンロードしたjquery.lazyload.jsをhead内に読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script type="text/javascript" src="jquery.lazyload.js"></script> 続いてL
stacktable.js
The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format. 2021 Update 9 years later, I recommend using all or mostly pure CSS for this kind of thing. See this for example. Download Source files on github or download the zip. How to Use Call
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
jQuery plugin｜Ajax｜PHP & JavaScript Room
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説jQZoom v2.2 〔画像の一部を虫眼鏡みたいに拡大鏡ウィンドウ表示〕 Magnify, a jQuery plugin 〔画像の一部を拡大表示〕 panView 〔マウスドラッグで画像の一部を表示〕 jQPanView based in jQuery 1.1 〔画像の一部を拡大表示〕 サムネイル画像にマウスオーバーした部分の画像を虫眼鏡のように拡大鏡ウィンドウ表示するjQueryライブラリ。 拡大鏡ウィンドウのサイズ、オフセット、位置などの指定も可能です。 設置イメージ 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）