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. Intense Images
  2. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  3. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

  4. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  5. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP