スタイルシートによる横メニューを設置

　2008-01-06

　このブログでは使用していませんが、他のサイトではよく利用しているスタイルシートによる横メニューです。色、長さ、メニューの数はCSSで自由に変更できます。

CSSは下記のようになっています。

<STYLE type="text/css">
<!--

#navi_top{
  background-color: #ff6600;
  width:400px;
  text-align:center;
  font-size:12px;
  margin-top : 3px;
  margin-bottom : 15px;
  border-top-width : 3px;
  border-top-style : solid;
  border-top-color : #0000c2;
}
#navi_top span{
  padding:3px;
  font-size:12px;
  display:block;

}
#navi_top A{
  display:block;
  width:80px;
  color: #fff;
  padding-top: 1px;
  float: left;
  text-decoration: none;
  font-size:12px;
  background-color : #ff6600;
}

#navi_top ul{
  display:inline;
  margin:0px;
  padding:0px;
}
#navi_top li{
  display:inline;
  margin:0px;
  padding:0px;
  list-style-type:none;
}

#navi_top a:hover{
  background-color:#0000c2;
}

#navi_top a.top:hover{
  background-color: #02b300;
}

#navi_top a.blog:hover{
  background-color: #990033;
  font-size:12px;
}

-->
</STYLE>

class指定するとマウスを乗せたときの色を変えられます。

カテゴリ：CSS トラックバック(0) コメント(0)

CSS メニュー

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

スポンサーサイト

スタイルシートによる横メニューを設置

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-