Blog

HOME > Web > css > 【CSS】マウスオーバーでタブ切替を実装する簡単な方法

【CSS】マウスオーバーでタブ切替を実装する簡単な方法

2017/09/16

css

備忘録です。

クリックでタブを切り替えるjQuery方法について紹介しましたが、今回はマウスオーバーでタブ切替を実装する方法です。
マウスオーバーでタブを表示し、クリックで指定リンクが表示されます。

サンプル

html

<div id="wrap">
    <ul class="tabwrap">
        <li><a href="http://yahoo.co.jp" target="_blank">タブ1</a>
            <div class="tabcont">
                <div class="inner">ここにタブ内容を記述。ヤフーが表示されます。</div>
            </div>
        </li>
        <li><a href="http://google.com" target="_blank">タブ2</a>
            <div class="tabcont">
                <div class="inner">ここにタブ内容を記述。Googleが表示されます。</div>
            </div>
        </li>
        <li><a href="https://www.msn.com/ja-jp" target="_blank">タブ3</a>
            <div class="tabcont">
                <div class="inner">ここにタブ内容を記述。MSNが表示されます。</div>
            </div>
        </li>
        <li><a href="https://www.bing.com/" target="_blank">タブ4</a>
            <div class="tabcont">
                <div class="inner">ここにタブ内容を記述。Bingが表示されます。</div>
            </div>
        </li>
    </ul>
</div>

CSS

#wrap{
    position:relative;
    width:100%;
    height:600px;
    z-index:1;
    background:#f7f7f7;
}
ul.tabwrap{
    position:relative;
    width:100%;
}
.tabwrap li{
    float:left;
    width:25%;
    height:50px;
    text-align:center;
    font-size:14px;
    border-top:1px solid #000;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    cursor:pointer;
}
.tabwrap li:last-child{
    border-right:1px solid #000;
}
.tabwrap li a{
    display:block;
    width:100%;
    height:50px;
    padding:10px 0;
}
.tabcont{
    position:absolute;
    width:100%;
    top:50px;
    left:0;
    max-height:0;
    margin:auto;
    text-align:center;
    color:#000;
    background-color:#ccc;
    z-index:100;
    overflow:hidden;
}
.tabcont .inner{
    padding:20px 0;
}
.tabwrap li:hover{
    background-color:#ccc;
    color:#fff;
    transition:all 1s;
}
.tabwrap li:hover .tabcont{
    max-height:300px; /*開いたときの高さを指定*/
}

タブコンテンツを100%表示にするために、ulにposition:relativeを指定。（liで指定するとwidthがliの幅になります。）
.tabcontをposition:absolute、width:100%、topはulのheightにあわせます。max-height:0;overflow:hiddenで指定します。li:hover .tabcontでmax-height（min-height）を指定します。
.tabcontでpaddingを指定せず、innerなど子要素でpadding指定をしてください。
後は好みでcssを編集してください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ