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で縦のタイプです。サイドバーにいいかもですね。

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

関連記事

  1. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  2. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  3. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  6. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

コメント

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

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

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP