jQueryタブメニュー

タブメニュー作成方法

「jquery.min.js」をダウンロード致します。
ダウンロード先

jQueryタブメニュー

下記のソースを追加してください。

body{
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background:#E46E6E;
}
ul li {
    float: left;
    list-style-type: none;
    width: 25%;
}
 
ul li a {
    font-size: 1em;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    display: block;
    padding: 9%;
    text-align: center;
    width: 100%;
    background: #C15757;
    border: 1px solid #c15757;
    border-bottom: none;
}
ul li a:hover{
    background:#D26161;
    color:#FFF;
}
 
ul li a.current {
    background: white;
    color: #C15757;
}
 
#contents{
    clear:both;
}
 
#contents div {
    padding: 5%;
    background: white;
    text-align: center;
    border: 1px solid #c15757;
    border-top: none;
}
 
#contents p{
    margin-top:20px;
    line-height:2em;
    color:#C15757;
}
 
#contents strong {
    font-size: 2em;
    font-weight: bold;
    color: #c15757;
    text-decoration: underline;
}


  

Blue/Red/White

36・38・40

cotton 100%

Japan

 
 


参考サイト

Author: 小清水 和真

WebディレクションからWebザイン・コーディングを主に行っております。 2021年株式会社を設立。講師もしております。

コメントを残す