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. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  2. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  3. jQuery ui material design datepicker
  4. jQuery Section Navi Plugin
  5. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  6. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

コメント

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP