Jimdoでプルダウンメニューを作る方法

Jimdoの独自レイアウトのプルダウンメニューをCSSだけで作る

先日のJimdoのバージョンアップで独自レイアウトのHTMLの項目に新たにナビゲーションなどのメニューが追加された。このメニューを利用することで、ようやくプルダウンメニューが作れるようになった。

 

Javascriptを使う方法がスマートではありますがスタイルシートのみで作る方法をご紹介いたします。

 

HTML

<div id="topnavi">

    <var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>

    <div class="clear">

    </div>

</div>

CSS

/* プルダウンメニュー

---------------------------------------------------------*/

#topnavi{

    width:980px;

    margin:0px auto;

}

 

.j-nav-level-0{

    padding:0px;

    margin:0px;

}

 

.j-nav-level-0 li{

    z-index:100;

    display:block;

    float:left;

    width:130px;

    height:30px;

    background:#fff;

    position: relative;

    overflow:hidden;

    padding:0px;

    margin:0px;

    margin-right:5px;

    border:1px solid #333;

    border-top:none;

}

 

.j-nav-level-0 li a{

    font-size:12px;

    color:#333;

    text-decoration:none;

    display:block;

    height:30px;

    line-height:30px;

    padding:0px 10px;

    text-align:center;

}

 

.j-nav-level-0 li:hover{

    overflow:visible;

}

 

.j-nav-level-0 li a:hover{

    background:#eee;

}

 

.j-nav-level-1{

    padding:0px;

    margin:0px;

    position:absolute;

    top:30px;

    left:0px;

    background:#fff;

    border-bottom:1px solid #666;

}

 

.j-nav-level-1 li{

    padding:0px;

    margin:0px;

    display:block;

    width:200px;

    height:25px;

    position:relative;

    font-size:12px;

    border:1px solid #666;

    border-bottom:1px dotted #ccc;

    text-indent:7px;

}

 

.j-nav-level-1 li a{

    padding:0px;

    margin:0px;

    width:200px;

    height:25px;

    line-height:25px;

    text-align:left;

}

 

.j-nav-level-1 li a:hover{

    background:#eee;

    border-bottom:1px dotted #ccc;

}

 

.j-nav-level-2{

    padding:0px;

    margin:0px;

    position:absolute;

    top:0px;

    left:200px;

    border-bottom:1px solid #666;

}

 

.j-nav-level-2 li{

    padding:0px;

    margin:0px;

    display:block;

    font-size:12px;

    width:200px;

    height:25px;

    border-bottom:1px dotted #999;

}

 

.j-nav-level-2 li a{

    padding:0px;

    margin:0px;

    width:200px;

    height:25px;

    line-height:20px;

}

 

うまく出来たら他の方のために是非コメントを残してくださいね!

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422