html5 nav グローバルナビ css でロールオーバーにする方法

前回htmlでグローバルナビを作成しましたが、今回は続きでそのグローバルナビを装飾してみます。
前回はこちら
完成品はこちら

nav ul {
              list-style-type: none;

}
nav li {
           float: left;
           line-height: 40px;
           font-size: 20px;
           background-color: #000000;
}
nav li a{
           float: left;
           background-color: #000000;
           color: #ffffff;
           padding-right: 13px;
	   padding-bottom: 0px;
           padding-top: 0px;
	   padding-left: 13px;
           text-decoration: none;

}

nav li a:hover{
                background-color: #ffffff;
                color: #000000;
                padding-right: 13px;
	        padding-bottom: 0px;
                padding-top: 0px;
	        padding-left: 13px;
}

前回からの追加部分

11行目からが、今回追加した部分です。ロールオーバーにする為、マウスポインタが乗っている時と乗っていないときの状態をcssで定義します。
ちなみに「マウスポインタとは」をウィキペディアで調べてみると

GUI環境において、操作対象を示すために表示される矢印などの小さな図形もカーソルと呼ばれる。「カーソルの操作」の節で後述するとおり、マウスで操作されることが多いので、マウスポインタ(mouse pointer)とも呼ばれる。

11から21行目がマウスポインタが乗ってない時、23から30行目が乗っている時を定義しています。(:hoverとはマウスポインタが乗っている時を表しています)

マウスポインタが乗っていない時


nav li a{
           float: left;
           background-color: #000000;
           color: #ffffff;
           padding-right: 13px;
	   padding-bottom: 0px;
           padding-top: 0px;
	   padding-left: 13px;
           text-decoration: none;

}
プロパティ 結果
float left 背景色をうまく表示させる為に必要
color #ffffff 文字色を白にしています
background-color #000000 背景色を黒にしています
padding 13px 文字間を調整してます
text-decoration none アンダーラインを消しています

マウスポインタが乗っている時


nav li a:hover{
                background-color: #ffffff;
                color: #000000;
                padding-right: 13px;
	        padding-bottom: 0px;
                padding-top: 0px;
	        padding-left: 13px;
}
プロパティ 結果
color #000000 文字色を黒にしています
background-color #ffffff 背景色を白にしています
padding 13px 文字間を調整してます
text-decoration none アンダーラインを消しています

背景色と文字色を反転させて、動きのあるナビゲーションにしてます。
nav6

プルダウンメニュー付き、ナビはこちら

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です