[B! jquery] TakamiArakawaのブックマーク

jQuery Scrollify - Power steering for your scroll wheel

Basic Setup Scrollify requires jQuery 1.7+. <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : ".example-classname", }); }); </script> </head> <body> <div class="example-classname"></div> <div class="example-classname"></div> </body> </html> Configuration $.scrollify({ section : "section", sectionName : "section-name", interstitialSection : "", easing: "easeOutExpo", sc

TakamiArakawa 2016/09/13

リンク

レスポンシブに対応した簡単メニュー

PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。サンプルを用意しましたのでまずは確認してみてください。ウィンドウサイズを小さくしてみたり広げてみたりすると、２列になり、メニュータブにと変化するようにしてあります。デモサンプルそれでは、作り方を見ていきましょう。 1.HTMLを記述 <nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="#">Navi1</a></li> <li><a href="#">Navi2</a></li> <li><a href="#">Navi3</a></li> <li><a href="

TakamiArakawa 2014/12/01

リンク

http://solidstate.jp/ContentsDisplay/slidebox/script_27.html

TakamiArakawa 2014/08/15

良いのがあった。

リンク

jQuery マウスオーバーで横からパネルかメニューをニューっと出す

jQueryを使って、マウスオーバーするとパネルがニューッと出てくる方法をご紹介します。表示スペースを有効に使いたいときや、ちょっとしたサイトアクセントにいいかもしれません。 INDEX バネル全体がニューッと出てくるタイプ各メニューがニューッと出てくるタイプ補足：パネル全体がニューッと出てくるタイプ（右から）基本的な作り方は同じで、違うのはCSSだけです。バネル全体がニューッと出てくるタイプ ▶ DEMO 1 jQuery読み込み＊<head>〜</head>の間に以下のソースを記述 <script type="text/javascript" src="http://ajax.google apis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> JavaScript ＊<head>〜</head>の間に以下のソースを記

TakamiArakawa 2014/08/12

リンク

任意の部分の文字サイズをクリックで切り替えるjQueryプラグイン「fontScaler」実装 | イチニチ。

個人で運営しているブログだったら文字サイズなんて運営者の好みでいいと思うんですけど、幅広い年齢層をターゲットとしているポータルサイトやネットショップなんかには文字サイズを切り替える機能があった方がいいんじゃないかな～。今回紹介する「fontScaler（フォント・スケーラー）」は、”コンテンツ部分のみ”など部分的に文字を拡大縮小したい人にぴったりのスクリプトです。 CSSの指定次第でいろいろと応用が利きそうだし、実装は割と簡単。まずはjQueryを含めた一式ダウンロード。 fontScaler 解凍すると「jquery.fontScaler.v0.2」というフォルダが出来上がるので、「fontScaler」とでもフォルダ名を変更しておいて、それをサーバーに丸ごとアップロード。 fontScalerを使用したいページのヘッダに以下を記入。 <link rel="stylesheet" t

TakamiArakawa 2013/03/25

jquery
CSS

リンク

なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密

日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。な

TakamiArakawa 2013/03/07

リンク

jQuery UI の Accordion プラグインによるアコーディオンメニュー

実装例の動作について「メニュー 1」「メニュー 2」「メニュー 3」をクリックすると、クリックしたメニューを開き、それ以外のメニューを閉じる。実装例のソースコード読み込み読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script> <link rel="stylesheet" href="themes/base/jquery.ui.all.c

TakamiArakawa 2013/02/21

リンク

jQuery Alert Dialogs

« jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) Basic Examples Alert jAlert('This is a custom alert box', 'Alert Dialog'); Confirm jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { jAlert('Confirmed: ' + r, 'Confirmation Results'); }); Prompt jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) { if( r ) alert('You entered ' + r); }); Addit