クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQuery」

クールでお洒落なナビゲーションを簡単に実装することができるjQueryプラグイン「Kwicks for jQuery」を使ってみました。オプションを変更するだけで色々なナビゲーションにすることができるのでとても便利です。マウスオーバーで拡大するものや、アコーディオンタイプのものまで色々あるので結構気に入りました。以下使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.kwicks-1.5.1.pack.js"></script>

ナビゲーションのHTMLはこんな感じでシンプルに。

<ul class="kwicks" >
    <li id="kwick1"></li>
    <li id="kwick2"></li>
    <li id="kwick3"></li>
    <li id="kwick4"></li>
</ul>

デフォルトで記述しておくCSSです。

.kwicks {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

.kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

で、公式サイトにはExample 1からExample 7まであるので好きなタイプを選んで、そのCSSとJavaScriptを記述します。とりあえずExample 1を記述してみます。

.kwicks li{
    float: left;
    width: 125px;
    height: 100px;
    margin-right: 5px;
}
#kwick1 { 
    background-color: #53b388;
    background-image: url('好きな画像のパス');
}
#kwick2 {
    background-color: #5a69a9;
    background-image: url('好きな画像のパス');
}
#kwick3 {
    background-color: #c26468;
    background-image: url('好きな画像のパス');
}
#kwick4 { 
    background-color: #bf7cc7;
    background-image: url('好きな画像のパス');
    margin-right: none;
}

上記のbackground-imageはマウスオーバーで伸びた時の幅の画像を作っておきます。初期値は125pxで、伸びた状態では205pxです。これは以下のオプションのmaxで指定できます。なので、widthが205px、heightが100pxの画像を作っておけばOKです。

オプションです。

$().ready(function() {
    $('.kwicks').kwicks({
        max : 205,
        spacing : 5
    });
});

以下は自分が試した時のサンプルコードです。自分で使う用にここに残しておきます。

HTML

<!-- Sample1 -->
<h2>サンプル1</h2>
<div class="sample">
    <ul class="kwicks1" >
        <li id="kwick1-1"><a href="#">リスト1</a></li>
        <li id="kwick1-2"><a href="#">リスト2</a></li>
        <li id="kwick1-3"><a href="#">リスト3</a></li>
        <li id="kwick1-4"><a href="#">リスト4</a></li>
    </ul>
</div>

<!-- Sample2 -->
<h2>サンプル2</h2>
<div class="sample">
    <ul class="kwicks2" >
        <li id="kwick2-1"><a href="#">リスト1</a></li>
        <li id="kwick2-2">
            <ul class="kwick2-child">
                <li><a href="#">リスト2-1</a></li>
                <li><a href="#">リスト2-2</a></li>
                <li><a href="#">リスト2-3</a></li>
                <li><a href="#">リスト2-4</a></li>
            </ul>
        </li>
        <li id="kwick2-3"><a href="#">リスト3</a></li>
        <li id="kwick2-4">
            <ul class="kwick2-child">
                <li><a href="#">リスト4-1</a></li>
                <li><a href="#">リスト4-2</a></li>
                <li><a href="#">リスト4-3</a></li>
                <li><a href="#">リスト4-4</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.sample {
    margin-bottom: 30px;
}

/*-- Default --*/
.kwicks1,
.kwicks2 {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

.kwicks1 li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

/*-- Sample1 --*/
.kwicks1 li{
    float: left;
    width: 125px;
    height: 100px;
    margin-right: 5px;
}

.kwicks1 li a {
    width: 205px;
    height: 100px;
    display: block;
    line-height: 100px;
    font-size: 13px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

.kwicks1 li a:hover {
    text-decoration: underline;
}

#kwick1-1 { 
    background-color: #53b388;
    background-image: url('images/list.png');
}

#kwick1-2 {
    background-color: #5a69a9;
    background-image: url('images/list.png');
}

#kwick1-3 {
    background-color: #c26468;
    background-image: url('images/list.png');
}

#kwick1-4 { 
    background-color: #bf7cc7;
    background-image: url('images/list.png');
    margin-right: none;
}

/*-- Sample2 --*/
.kwicks2 {
    overflow: hidden;
}
.kwicks2 li {
    width: 125px;
    height: 100px;
    margin-bottom: 3px;
}

.kwicks2 li a {
    line-height: 30px;
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

#kwick2-1 { 
    background-color: #4D9AA8;
}

#kwick2-2 {
    background-color: #82A616;
}

#kwick2-3 {
    background-color: #F29A1F;
}

#kwick2-4 { 
    background-color: #A66A16;
    margin-bottom: none;
}

.kwick2-child li {
    list-style: none;
    height: 30px;
}

JavaScript

<script type="text/javascript">
$().ready(function() {
    // Sample1
    $('.kwicks1').kwicks({
        max : 205,
        spacing : 5
    });

    // Sample2
    $('.kwicks2').kwicks({
        min : 30,
        spacing : 3,
        isVertical : true,
        sticky : true,
        event : 'click'
    });
});
</script>

sample2のisVerticalはfalseにすると横のアコーディオンタイプになります。trueで縦のタイプです。サイドバーにいいかもですね。

以下のサイトからダウンロードできます。

Kwicks for jQuery