2013/10/17

jimdoの、ナビゲーションのCSS設定

Jimdoでデフォルトで設定されている、ナビゲーションのCSS(3階層まで設定できるようです)

#navigation { }

 ul.mainNav1,ul.mainNav2,ul.mainNav3{  }
 ul.mainNav1 li,ul.mainNav2 li,ul.mainNav3 li{  }
 ul.mainNav1 li a,ul.mainNav2 li a,ul.mainNav3 li a{  }
 ul.mainNav1 li a.level_1 { }
 ul.mainNav2 li a.level_2 { }
 ul.mainNav3 li a.level_3 { }

 ul.mainNav1 a:hover{ }
 ul.mainNav1 a.current { }

{ } の中身を変更してオリジナルのリンクを作成します。

CSSメニューを作りました。

 ul.mainNav1 a:hover{ }の所で、サイズを変えてやると、マウスオーバーするとでっかくなるメニューなども作れます。


footerにもナビゲーションを追加する


footerにも、同じナビゲーションを違うレイアウトで設置したい、との希望があったので全ての設定に、#footer をつけて設定しなおしました。

#footer ul.mainNav1,ul.mainNav2,ul.mainNav3{  }
#footer ul.mainNav1 li,ul.mainNav2 li,ul.mainNav3 li{  }
#footer ul.mainNav1 li a,ul.mainNav2 li a,ul.mainNav3 li a{  }
#footer ul.mainNav1 li a.level_1 { }
#footer ul.mainNav2 li a.level_2 { }
#footer ul.mainNav3 li a.level_3 { }

#footer ul.mainNav1 a:hover{ }
#footer ul.mainNav1 a.current { }



スポンサードリンク