マウスオーバーするとソーシャルメディアのリンクを表示するjQueryプラグイン「SMover」
「SMover」はソーシャルメディアへのリンクを必要な時にだけ表示するためのjQueryプラグインです。
常に表示していると邪魔なアイコンもユーザーのアクションによって表示させる事で、すっきりしたレイアウトになります。
通常時は以下のような状態にしておいて、、、
マウスオーバーでアイコンやリンクを表示させる事ができます。
ソーシャルメディアへのリンクだけでなく、固有のメールリンクやゴミ箱アイコンなど使い道は色々ありそうです。
以下のようなコーデで簡単に実装できるようです。
■ JAVASCRIPT
1 | $(document).ready(function() { |
2 | $('#share-page').smover(); |
3 | }); |
■ HTML
01 | <div id="share-page"> |
02 | <span>Share Page</span> |
03 | <ul style="display: none;"> |
04 | <li><a title="Delicious" href="#"><img alt="Share with Delicious" src="./images/social-icons/delicious.png"></a></li> |
05 | <li><a title="Digg" href="#"><img alt="Share with Digg" src="./images/social-icons/digg.png"></a></li> |
06 | <li><a title="Facebook" href="#"><img alt="Share with Facebook" src="./images/social-icons/facebook.png"></a></li> |
07 | <li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="./images/social-icons/stumbleupon.png"></a></li> |
08 | <li><a title="Twitter" href="#"><img alt="Share with Twitter" src="./images/social-icons/twitter.png"></a></li> |
09 | </ul> |
10 | <div class="clear-fix"> </div> |
11 | </div> |
ファイルサイズも4KBと軽量サイズですね。
動作にはjQueryとhoverIntentというプラグインが必要なようです。
興味のある方はダウンロードしてみてください。
最新情報をお届けします
