jQueryタブメニュー

Posted on by

目次

タブメニュー作成方法

「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
参考サイト

Mobile First Marketing Labo