高さの変わるタブメニュー
タブ内コンテンツの高さが合っていなくても問題ないタブメニューです。
js(jQuery)でやっていることはタブコンテンツのdisplayプロパティ変更と、クリックしたタブメニューにclassを付けるくらいです。
後の動きはすべてcssで行っています。
一応レスポンシブ対応。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <div class="prefectures"> <div class="prefectures_inner inner clearfix"> <ul class="prefectures_tab"> <li class="select">北海道</li> <li>東北</li> <li>関東</li> </ul> <ul class="prefectures_list"> <li> <table class="prefectures_table"> <thead> <tr> <th>都道府県</th> <th>県庁所在地</th> <th>県の花</th> <th>特産物</th> </tr> </thead> <tbody> <tr> <td>北海道</td> <td>札幌</td> <td>浜梨</td> <td>夕張メロン、メークイン・男爵いも、毛ガニ、イクラ</td> </tr> </tbody> </table> </li> <li class="hide"> <table class="prefectures_table"> <thead> <tr> <th>都道府県</th> <th>県庁所在地</th> <th>県の花</th> <th>特産物</th> </tr> </thead> <tbody> <tr> <td>青森</td> <td>青森</td> <td>りんご</td> <td>りんご、長いも、いか、にんにく</td> </tr> <tr> <td>岩手</td> <td>盛岡</td> <td>桐</td> <td>イワナ、前沢牛、盛岡冷麺、久慈琥珀</td> </tr> <tr> <td>宮城</td> <td>仙台</td> <td>萩</td> <td>笹かまぼこ、仙台長なす漬け、ゆべし、白石温麺</td> </tr> <tr> <td>秋田</td> <td>秋田</td> <td>蕗の薹</td> <td>比内地鶏、稲庭うどん、天然岩ガキ、ハタハタ</td> </tr> <tr> <td>山形</td> <td>山形</td> <td>紅花</td> <td>さくらんぼ、米沢牛、尾花沢スイカ、納豆汁</td> </tr> <tr> <td>福島</td> <td>福島</td> <td>石楠花</td> <td>あんぽ柿、喜多方ラーメン、会津漆器、松葉ガニ</td> </tr> </tbody> </table> </li> <li class="hide"> <table class="prefectures_table"> <thead> <tr> <th>都道府県</th> <th>県庁所在地</th> <th>県の花</th> <th>特産物</th> </tr> </thead> <tbody> <tr> <td>東京</td> <td>東京</td> <td>ソメイヨシノ</td> <td>深川丼、江戸甘みそ、小松菜、東京しゃも</td> </tr> <tr> <td>神奈川</td> <td>神奈川</td> <td>山百合</td> <td>やまゆりポーク、鎌倉彫、高座豚、崎陽軒</td> </tr> <tr> <td>埼玉</td> <td>さいたま</td> <td>桜草</td> <td>五家宝、おなめ、草加せんべい、狭山茶</td> </tr> <tr> <td>千葉</td> <td>千葉</td> <td>菜の花</td> <td>落花生、てっぽう漬、アサリ、うなぎ大和煮</td> </tr> <tr> <td>茨城</td> <td>水戸</td> <td>薔薇</td> <td>あんこう鍋、水戸納豆、かぼちゃ、常陸牛</td> </tr> <tr> <td>栃木</td> <td>宇都宮</td> <td>やしおつつじ</td> <td>かんぴょう、杉線香、佐野ラーメン、益子焼き</td> </tr> <tr> <td>群馬</td> <td>前橋</td> <td>れんげつつじ</td> <td>磯部せんべい、下仁田こんにゃく、水沢うどん、下仁田ネギ</td> </tr> </tbody> </table> </li> </ul> </div> </div> <!--div[prefectures]--> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | /*----------------------------------------------------------------------*/ /*タブメニュー /*----------------------------------------------------------------------*/ .prefectures_tab{ width:980px; margin:0 auto; overflow:hidden; } .prefectures_tab li{ background:#d1d5dd; padding:15px 50px; float:left; margin-left:10px; font-size: 2.3rem; cursor:pointer; -webkit-transition: .3s; transition: .3s; } .prefectures_tab li:first-child{ margin-left:0; } .prefectures_tab li.select{ background:#171790; color: #fff; } .prefectures_list{ padding-bottom: 20px; border-top: 5px solid #171790; background: #d1d5dd; } .prefectures_list li{ margin-top: 20px; } .prefectures .hide { display:none; } /*----------------------------------------------------------------------*/ /*prefectures_table /*----------------------------------------------------------------------*/ .prefectures_table{ width: 980px; margin: 0 auto; } .prefectures_table thead{ color: #fff; background: #171790; } .prefectures_table thead th{ padding: 15px 0; font-weight: bold; font-size: 1.8rem; text-align: center; border-left: 1px solid #fff; border-right: 1px solid #fff; } .prefectures_table td{ padding: 10px; text-align: center; border-left: 1px solid #fff; border-right: 1px solid #fff; box-sizing: border-box; } .prefectures_table tbody>tr{ background: #fff; } .prefectures_table tbody>tr:nth-child(odd){ background: #eff2fa; } @media screen and (max-width: 979px) { /*----------------------------------------------------------------------*/ /*タブメニュー[sp] /*----------------------------------------------------------------------*/ .prefectures_tab{ width:100%; min-width:300px; overflow:hidden; } .prefectures_tab li{ background:#d1d5dd; padding:10px 20px; float:left; margin-left:10px; font-size: 1.6rem; cursor:pointer; -webkit-transition: .3s; transition: .3s; } .prefectures_tab li.select{ background:#171790; color: #fff; } .prefectures_list{ border-top: 5px solid #171790; } .prefectures_list li{ background:#eee; margin-top: 20px; -webkit-transition: .3s; transition: .3s; } .prefectures .hide { display:none; } /*----------------------------------------------------------------------*/ /*prefectures_table /*----------------------------------------------------------------------*/ .prefectures_table{ width: 100%; } .prefectures_table thead{ color: #fff; background: #171790; } .prefectures_table thead th{ padding: 5px 0; font-weight: bold; font-size: 1.4rem; text-align: center; border-left: 1px solid #fff; border-right: 1px solid #fff; vertical-align: middle; } .prefectures_table td{ padding: 10px; text-align: center; font-size: 1.4rem; border-left: 1px solid #fff; border-right: 1px solid #fff; box-sizing: border-box; } .prefectures_table tbody>tr{ background: #fff; } .prefectures_table tbody>tr:nth-child(odd){ background: #eff2fa; } } |
Js(jQuery)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /*----------------------------------------------------------------------*/ /*タブメニュー /*----------------------------------------------------------------------*/ $(function() { //.prefectures_tab liをクリックしたとき $(".prefectures_tab li").on("click", function() { //クリックされた.prefectures_tab liを特定する var index = $('.prefectures_tab li').index(this); //.prefectures_list liにはあらかじめdisplay:noneを効かせておく $('.prefectures_list li').css('display','none'); //クリックされた.prefectures_list liを.eq(index)で探しだし、display:blockを効かせる $('.prefectures_list li').eq(index).css('display','block'); //クリックされた.prefectures_tab liにはclass名selectを付け、他のものには付けない。 $('.prefectures_tab li').removeClass('select'); $(this).addClass('select'); }); }); |
