印象的にサムネイルを魅せられるjQueryチュートリアル via Scrollable Thumbs Menu with jQuery

クチコミサイト構築「エディタ・エンタープライズ」
デモサイトトップ
制作技術
印象的にサムネイルを魅せられるjQueryチュートリアル via Scrollable Thumbs Menu with jQuery

クチコミサイト構築「エディタ・エンタープライズ」デモサイト

日本初のブログ自動収集システム「エディタ・エンタープライズ」により、簡単・低コスト・SEO対策が可能な口コミサイトが構築可能です。
ブロガー別の記事一覧やカテゴリ別、月別、取得画像別などさまざまな切り口で見せることができるので、映画や商品のキャンペーンをはじめ、テーマ別のポータルサイトを構築できます。

2010年05月11日｜記事提供：すくえあ

まずは見ていただいた方がいいかもしれません。（サンプル）
このような印象的なサムネイルの魅せ方をJavascriptライブラリjQueryで実現しています。
上記のようなアパレルだけでなく、ブランド志向の商品・サービスに使えそうです。
via：Scrollable Thumbs Menu with jQuery | Codrops

使用方法
まずhtmlのマークアップです。

次にCSSです。


body{overflow:hidden;}

/* ベースメニューの指定

 ページを下部にスクロール可能にしたい場合メニューをbottomにくっつけます */

ul.menu{

    list-style:none;

    font-family: "Trebuchet MS", Arial, sans-serif;;

    font-size: 15px;

    font-style: normal;

    font-weight: normal;

    text-transform:uppercase;

    letter-spacing: normal;

    line-height: 1.45em;

    position: fixed;

    bottom:0px;

    left:0px;

    width:700px;

    height:100%;

}

ul.menu li{

    float:left;

    position:relative;

    height:100%;

    width:130px;

}

ul.menu li > a{

    position:absolute;

    bottom:0px;

    left:0px;

    width:130px;

    height:40px;

    text-align:center;

    line-height:40px;

    color:#ddd;

    background-color:#291A2F;

    letter-spacing:1px;

    cursor:pointer;

    text-decoration:none;

    text-shadow:0px 0px 1px #fff;

    -moz-box-shadow:-1px 0px 5px #000;

    -webkit-box-shadow:-1px 0px 5px #000;

    box-shadow:-1px 0px 5px #000;

    opacity:0.9;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);

}



/* サムネイルのスタイル指定です */

div.sc_menu_wrapper {

    position: absolute;

    top:0px;

    width:150px;

    overflow: hidden;

    bottom:0px;

    left:0px;

    visibility:hidden;

}

div.sc_menu {

    width:130px;

    visibility:hidden;

}



.sc_menu a {

    display: block;

    background-color:#22002F;

    color: #fff;

    text-align:center;

    -moz-box-shadow:3px -3px 3px #3B0F4F;

    box-shadow:3px -3px 3px #3B0F4F;

    -webkit-box-shadow:3px -3px 3px #3B0F4F;

}

.sc_menu img {

    display: block;

    border: none;

    opacity:0.3;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);

}