2012/12/13
サンプルECサイトを作ってみました。~heightLineプラグインの使用~
弊社ではECサイトのシステムを開発し、サイトの制作も行なっていますが、
その関係で、ちょっとしたサンプルサイトを作ってみました。
完全に自分好みの色合い、レイアウトもいろんなサイトを見ていて、
やってみたいと思ったモノですが、
よろしければデモをご覧ください。
jQueryを使用した部分について説明していきたいと思います。
ユーザー、ログイン、カートのアイコン部分のツールチップ
ロゴ下の各アイコンをホバーすると、
説明文がふわっと表示されます。
html
|
1 2 3 4 5 | <div class="icon clearfix"> <a href=""><img src="images/user.jpg"><span>マイページ</span></a> <a href=""><img src="images/login.jpg"><span>ログイン</span></a> <a href="" class="nom"><img src="images/cart.jpg"><span>カートを見る</span></a> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .icon a { position: relative; display: block; float: left; margin-right: 30px; } .icon a.nom { margin: 0; } .icon span { display: none; position: absolute; top: -10px; left: -23px; right: 0; width: 80px; background-color: #725942; color: #fff; text-align: center; border-radius: 5px; padding: 3px 3px; } |
jQuery
|
1 2 3 4 5 | $(".icon a").hover(function() { $(this).children("span").animate({opacity: "show",top: "-25px"}, "slow");}, function() { $(this).children("span").animate({opacity: "hide",top: "-10px"}, "fast"); }); |
ラインナップのカテゴリナビ,第二階層
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="subnavi"> <div> <ul> <li><a href="">カテゴリ</a> <ul> <li><a href="">カテゴリ</a></li> </ul> </li> <li><a href="">カテゴリ</a></li> <li><a href="">カテゴリ</a> <ul> <li><a href="">カテゴリ</a></li> <li><a href="">カテゴリ</a></li> <li><a href="">カテゴリ</a></li> </ul> </li> <li><a href="">カテゴリ</a></li> </ul> </div> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .subnavi { background-color: #ff6539; width: 150px; height: 100%; position: fixed; left: 0px; top: 0; z-index: 30; } .subnavi div { margin: 50px 20px 0 20px; } .subnavi ul li { margin-bottom: 15px; color: #ffffff; position: relative; width: 100%; z-index: 50; } .subnavi ul li span { right: 0; position: absolute; top: 0; } .subnavi ul li a { color: #ffffff; display: block; text-decoration: none; } .subnavi ul li a:hover { text-decoration: underline; } .subnavi ul li ul { display: none; position: absolute; left: 0px; top: -10px; width: 100px; background-color: #ff9374; padding: 10px 10px 0 10px; z-index: 40; } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //ラインナップをクリックした際 $(".navi02").toggle( function(){ $(".subnavi").animate({left: "250px"}, "slow"); return false; },function(){ $(".subnavi").animate({left: "0"}, "fast"); }); //ラインナップのカテゴリをクリックした際 //liの子要素にulがあるか判断し、あれば、>を挿入 $(".subnavi li:has(ul)").append("<span>›</span>"); //liを押した際、ulがあればulが出現 $(".subnavi li:has(ul)").toggle( function(){ $(this).children("ul").animate({opacity: "show",left: "130px"}, "normal"); return false; },function(){ $(this).children("ul").animate({opacity: "hide",left: "0px"}, "fast"); return false; }); |
heightLineの使用方法
これは簡単で便利なプラグインでよく使用しています。
あるコンテンツの高さを揃えたい時に使用するプラグインです。
masonryといったプラグインをつかってレンガのように、並べるケースもありますが、
それだと見にくい、っていう場合にいいかと思います。
ここでは、商品の高さをすべて同じにし、レイアウトが崩れないようにしています。
(同じテキスト量なので、使わなくてもレイアウトは崩れませんが・・・)
使い方は、
headタグ内に、jQueryと、このプラグインを読み込みます。
|
1 | <script src="js/heightLine.js"></script> |
あとは揃えたいコンテンツのclassにheightLineをつけるだけです。
例：
|
1 2 3 4 5 6 | <ul> <li class="item heightLine"></li> <li class="item heightLine"></li> <li class="item heightLine"></li> <li class="item heightLine"></li> </ul> |
ひとつ縦が長いのがあると、それに合わせて他の縦も長くなるので、
空きが目立つ可能性もありますが・・・
以上、サイトについて簡単に説明させて頂きました。
もっとECサイトのサンプルを作ってまた披露できたらと思います。
Author Profile
スターフィールド編集部
SHARE
