ECプロ│ECサイト運営のためのアドバイス情報サイト

こんにちは、イメージデザインの古川です。

今回もjsを使った動きのある固定バナーを紹介します。
jsの導入なので、iframeを使用する必要があるのが、少し注意です。

固定する方法に関しては以前の記事を参考にしてください。

今回はバナーよりもメニューに近いものとなりますが、
Mac OSのDock風メニューです。Dock風メニューが何なのか分からなくても見ればたぶん分かります。

実際、自分はmacを使わないのでAppleの専門用語はあまり知りません。
あのキーボードのキーは全然慣れません・・・

jsプラグインの取得

今回使用するjsプラグインは「jqDock」というものです。

必要なものは下記のURLからダウンロードができます。

http://www.wizzud.com/downloads/

HTMLの作成

HTMLの記述は、必要なファイルと、ドキュメントに載っている内容に沿って入力します。

<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.jqdock.min.js"></script>
<script>
$(function(){
    $('#menu').jqDock({
		align: 'bottom'
    });
});
</script>
<div id="menu" class="myMenu">
  <a href="#" target="_top"><img src="menu1.png" /></a>
  <a href="#" target="_top"><img src="menu2.png" /></a>
  <a href="#" target="_top"><img src="menu3.png" /></a>
  <a href="#" target="_top"><img src="menu4.png" /></a>
  <a href="#" target="_top"><img src="menu5.png" /></a>
  <a href="#" target="_top"><img src="menu6.png" /></a>
</div>

基本的にはこれだけですが、今回はサイトにあるExapmplesから「Horizontal, bottom of page, centred, labelled」の設定を参考にしました。
ちなみに「align:’bottom’」となっている所を left　や right　に変えるだけでサイドに縦並びになってくれます。

バリエーション

このプラグインは色々とオプションが用意されているのでサイトに合った配置が可能です。
Exapmplesから好みのものを選んでコードをコピーして使う事ができます。