JavaScript

クールでお洒落なナビゲーションを簡単に実装できる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で縦のタイプです。サイドバーにいいかもですね。

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

CSSで使えるカラーネームの一覧を見やすく表示してくれる「147 Colors」前のページ

Photoshopで文字の選択範囲を作って画像を切り取る方法次のページ

関連記事

  1. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  2. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  3. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  4. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

  5. Menu Droplet Animation
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP