Nov 21, 2013

当サイトでもサイドバーで使用しているタブメニューを簡素化したものが以下ソースです。



以前CSSだけのタブメニューを試したんですが思うような挙動にならなかったので、軽くフェードもしてくれるjQuery版を実装してみました。コード本体も短いので負荷も少なくてサクサクいい感じ。

1.まずはjQuery本体をhead内に設置

多様なjQueryの機能を利用するために必要な親玉?をサーバに設置するか、Google Developersから引っ張ってくる必要があります。VerUPのたびに削除したりするのは面倒なので個人的には後者をお勧めします。既にバリバリjQueryを使っている方はここは飛ばしてください。
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"/></script>
HTMLソースのhead内に上記のコードを埋め込みます。

先々jQueryの挙動に不審を感じたら本家サイトGoogleDevelopersでバージョンを確認してみてもいいでしょう。

2.タブ機能を付与するプラグインをhead内に設置

タブの挙動を司るコードをHTMLソースのhead内に埋め込みます。
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $('.tab_area:first').show();
        $('.tab li:first').addClass('active');
  
        $('.tab li').click(function() {
            $('.tab li').removeClass('active');
            $(this).addClass('active');
            $('.tab_area').hide();
  
            $(jQuery(this).find('a').attr('href')).fadeIn();
            return false;
        });
    });
})(jQuery);
</script>
</head>
ハイライトしましたが、/headの直前が無難かと思います。

外部ファイルで管理したい方は、手前味噌ですがこちらをどうぞ。
【WordPress】複数のjQueryプラグインを1ファイルに収める

3.HTML内のタブを設置したい場所にコードを記述

<ul class="tab">
    <li><a href="#tab1">新着記事</a></li>
    <li><a href="#tab2">カテゴリ</a></li>
    <li><a href="#tab3">ランダム</a></li>
</ul>
<div class="tab_content">
    <div class="tab_area" id="tab1">新着記事の中身</div>
    <div class="tab_area" id="tab2">カテゴリの中身</div>
    <div class="tab_area" id="tab3">ランダムの中身</div>
</div>
2で埋め込んだプラグインとclass名が呼応しているので、そこさえ気を付ければclass名はtab_menuでもtab_includeでも何でもOKです。

4.スタイルシートで見映えをカスタムする

以下のコードを、サイト全体のスタイルを指定しているファイル(多くの場合style.css)に記述します。管理上この部分だけ別ファイルにしたいという場合も全然自由です。
.tab {
    list-style-type: none;
}
.tab li { /*タブ部分*/
	float: left;
	margin: 0 2px;
	padding: 3px 7px;
	background: #fbd594;
	}
.tab li.active { /*選択中のタブ*/
	background: #c9c9c9;
    }
.tab_area { /*切り替え部分非表示*/
    display: none;
    }
.tab_content { /*内容*/
    clear: both;
    width: 300px;
    border: 1px solid #999;
	padding: 20px;
    }
とりあえずこれで一度設置してみて、色や表示幅や間隔などをちょこちょこ変えていけばすぐ思い通りになるでしょう。


※このエントリの内容を実践した際のソースを失念しました…思い出したら追記します^^;



Comment

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

サイト内検索
  • Author

  • Twitter

    Follow @jay0926 (535 followers)
  • Facebook