FrontPage
マウスが近づくとMacのDockみたいにアイコンが拡大するナビ
MacのDockのように、マウスがアイコンの上にくるとそのアイコンが拡大して表示されるナビを作成してみました。jQueryと画像さえあれば簡単に設置できます。使用するデザインによっては、CSSを少し指定した方が良い場合もあります。
【作成方法】
- jquery.dock-0.8b.js をダウンロードして、 FTPでQHMの jsフォルダにアップロードする。
- ナビで使用する小さい画像と大きい画像をペアで用意し、SWFUでアップロードする。
この例では、35px と 100pxの画像を使用。 cut_35.png と cut_100.png のように名前をつけた画像を作成する。 - 以下のスクリプトをナビにコピペする。
- ナビには、使用する画像を &show のおまじないで貼り付ける。
【解説】
- jquery.js はQHMに入っているものを使用するのでダウンロードは不要。
- この例では、使用しているデザインのナビの背景に画像があったため、それを無効にしている。(使用するデザインにより変更が必要)
【コード(スクリプト)】
#beforescript{{ <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.dock-0.8b.js" type="text/javascript"></script> <script type="text/javascript"> var confDock = { iconMinSide : 35, //最小サイズ iconMaxSide : 100, //最大サイズ distAttDock : 100, //縮小する距離 coefAttDock : 2, //縮小率(推奨:0.5-2.5) veloOutDock : 500, //リスタートの早さ(推奨:500-2000) valign: "middle" //メニューのalign(top、bottom、middle) } $(function() { $("#navigator").addDockEffect(confDock); }); </script> <style type="text/css"> #navigator { background-image: url(""); height: 50px; } </style> }}
【ナビのおまじない】
[[&show(cut_35.png,,Cut);>FrontPage]] [[&show(file_35.png,,File);>FrontPage]] [[&show(file_attention_35.png,,Attention);>FrontPage]] [[&show(file_del_35.png,,Del);>FrontPage]] [[&show(file_edit_35.png,,Edit);>FrontPage]] [[&show(file_explore_35.png,,Explore);>FrontPage]] [[&show(file_new_35.png,,New);>FrontPage]] [[&show(info_35.png,,Info);>FrontPage]]
ご意見箱
皆様のご意見をお待ちします。
- tomzoさん、すごく良いですね~!!!カッコイイです!!!W3Cエラーも全然ないのですね♪ただで使わせて頂くのが悪いような感じです…(^^) -- yuna 2012-10-13 (土) 17:21:47
- yanaさん どうぞご自由にお使いください。最近は、jQueryとCSSを使い、なるべく簡単にQHMで利用できるようにいろいろとチャレンジしています。 -- tomzo 2012-10-14 (日) 09:44:10
- kochirano -- yoshi 2013-09-29 (日) 17:30:55
- こちらの記事を拝見して自分のサイトのナビ編集へ上記のスクリプトをコピペして続けざまに35PXで用意した画像を添付し(&show) -- yoshi 2013-09-29 (日) 17:33:41
- たのですがどうしてもうまくいきません。ぜひ詳しく手順をご教授いただけますでしょうか?また100PXの画像はナビのページのSWFUにあげておくだけでよいのでしょうか? -- soshi 2013-09-29 (日) 17:37:11
- たのですがどうしてもうまくいきません。ぜひ詳しく手順をご教授いただけますでしょうか?また100PXの画像はナビのページのSWFUにあげておくだけでよいのでしょうか? -- soshi 2013-09-29 (日) 20:15:36
- soshiさん こんにちは。
画像は最初にSWFUでアップしてください。それだけでOKです。
以下のサイトを参考にしてQHM用を作成しています。こちらを参照してください。
【Dockメニューを実現するjavascript「iconDock」】
http://www.skuare.net/test/jiconDock.html
このコメント欄は直接入力するのは難しいので、メモ帳などで作成してから、コピーしてから コメント欄にペーストすると入力しやすいです。 -- tomzo 2013-10-08 (火) 08:37:16 - とても、参考にさせていただいております。記事を記載していただきまして、ありがとうございます^-^ -- satonaka 2015-10-08 (木) 21:08:57