fadeToggleを使ったタブメニューのサンプル

解説

スマホサイトでも使える汎用性のあるタブメニューです。 jqueryとcssを使い簡単にタブメニューが実装できます。 タブをクリックすると下のコンテンツ内容が変わります。 タブはアクティブ状態が分かるようにclassがつくようになっています。

→デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

HTML

    <div id="sb-site">
      <header>
        <h1>ドロワーメニューサンプル</h1>
        <ul class="navi">
          <li class="sb-toggle-right">
            <a href="#"></a>
          </li>
        </ul>
      </header>
    </div>
    <div class="sb-slidebar sb-right sb-style-push">
      <h2>左メニューの内容</h2>
      <ul class="menu">
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
        <li>メニュー4</li>
        <li>メニュー5</li>
      </ul>
    </div>

CSS

#tab ul{
    width:100%;
    }
#tab li{
    float:left;
    display:block;
    width:33.3333%;
    }
#tab li a{
    display:block;
    width:100%;
    height:48px;
    line-height:50px;
    text-align:center;
    border:#ccc 1px solid;
    border-bottom:none;
    background:#CCC;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
    }
#tab li a.active{
    background:#fff;
    }
#tabContents div{
    width:100%;
    height:300px;
    padding:20px;
    border:#ccc 1px solid;
    border-top:none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
    }
#contents1{
    }
#contents2{
    display:none;
    }
#contents3{
    display:none;
    }

jQuery

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Slidebars -->
    <script src="slidebars.js"></script>
    <script>
            (function($) {
                $(document).ready(function() {
                    $.slidebars();
                });
            }) (jQuery);
        </script>

  続いては左側からメニューが出るサンプル。 →デモはこちら

HTML

    <div id="sb-site">
      <header>
        <h1>ドロワーメニューサンプル</h1>
        <ul class="navi">
          <li class="sb-toggle-left">
            <a href="#"></a>
          </li>
        </ul>
      </header>
    </div>
    <div class="sb-slidebar sb-left sb-style-push">
      <h2>左メニューの内容</h2>
      <ul class="menu">
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
        <li>メニュー4</li>
        <li>メニュー5</li>
      </ul>
    </div>

CSS

下記のCSSを読み込ませる。

    <link rel="stylesheet" href="slidebars.css">

メニューなどのCSS指定。

.sb-slidebar{
    color:#fff;
    padding:0px;
}
header{
    background:#ccc;
    height:40px;
    position:relative;
}
header h1{
    text-align:center;
    color:#000;
    margin:0px;
    font-size:14px;
    line-height:40px;
}
.sb-toggle-left{
    position:absolute;
    top:0;
    left:0;
}
.navi a{
    color:#333;
    display:block;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    text-decoration:none;
    font-weight:bolder;
}
.navi a:after{
    content:"☰"
}
.sb-active .navi a:after{
    content:"×"
}
.menu{
    list-style:none;
    background:#666;
}
.menu li{
    border-bottom:#CCC solid 1px;
    padding:10px;
}
.sb-slidebar h2{
    font-size:14px;
    padding:0 0 0 10px;
    height:40px;
    line-height:40px;
}

jQuery

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Slidebars -->
    <script src="slidebars.js"></script>
    <script>
            (function($) {
                $(document).ready(function() {
                    $.slidebars();
                });
            }) (jQuery);
        </script>

 

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

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