jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | Page 3 of 3 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
その3.「toggleClass」を使ってスイッチのオン・オフを切り替える 上記の2つだけでも結構使えますが、それに加えてメニューボタンのオン・オフ状態で見た目を変えたい場合もあるかと思います。 そんなときは「toggleClass」を使って装飾しましょう。 →デモはこちら これ、「.addClass()」や「.removeClass()」はいらないんです。 必要な記述は、わずか1行！ JS <script> $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); $(this).toggleClass("active");//追加部分 }); }); </script> HTML さっきと同じです。 CSS #acMenu dt{ display:block; width:1
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
On- and off-canvas menus - mmenu.js
By default, the plugin will prepend the menu to the BODY and hide it from sight. When the menu is being opened, the page slides out of view, revealing the menu and blocking the page from interaction. In other forms, the menu can be revealed by sliding in view, hiding the page behind it. This kind of behavior is called an "off-canvas" menu. An "on-canvas" menu on the other hand, is always opened an
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
【スマホでも使いやすい！】モバイルフレンドリーなレスポンシブメニューの基本
レスポンシブなナビゲーションの作り方は膨大な数ほどありますが、良いものを作ろうとすると少し大変です。 レスポンシブメニューはモバイルにも対応し、タッチ操作が行われるデバイスのことも考えなければなりません。 この記事ではモバイルにも対応したレスポンシブメニューの作り方をご紹介します。 まずは基本をおさえよう レスポンシブメニューをデザインする際には、ユーザーがどのようにモバイル端末を使用するのかを知っておく必要があります。 優れたナビゲーションは次のルールを守って作成されています。 ・メニューのトグルがわかりやすい ・全てのボタンやリンクがタッチしやすい大きさになっている ・タップした際にフィードバックがある ・サブメニューにもアクセスできる ・エフェクトがシンプルである ・様々なブラウザに対応している ここからは順を追って、レスポンシブメニューのデザイン法を紹介していきます。今回はオフキャ
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
onehackoranother.com | Default Web Site Page
SORRY! If you are the owner of this website, please contact your hosting provider: webmaster@onehackoranother.com It is possible you have reached this page because: The IP address for this domain may have changed recently. Check your DNS settings to verify that the domain is set up correctly. It may take 8-24 hours for DNS changes to propagate. It may be possible to restore access to this site by
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
tabtab.be
darsa.in
dev7studios