Rainierのナビゲーションをちょこっといじってみた

Rainierのナビゲーションはマウスを乗せたときに、文字が色変わるだけだったので、分かり易くマス全体の色と文字が変わるようにした

screen.cssの中にある

ナビゲーションのデザイン部分

#header[role=”banner”] [role=”navigation”] {
position: static;
height: 45px;
line-height: 45px; }
@media (min-width: 930px) {
#header[role=”banner”] [role=”navigation”] {
width: auto;
background-color:#FFFFFF ;}
/*背景を白にしたこれはもともと白なので必要ないと思うけど、入れた*/
#header[role=”banner”] [role=”navigation”] ul {
margin: 0; }
#header[role=”banner”] [role=”navigation”] ul li {
border-right: 1px solid #c0c6c9;
}
#header[role=”banner”] [role=”navigation”] a {
height: 45px;
padding: 0 0.809em;
line-height: 45px;
color: #2B2B2B; }
#header[role=”banner”] [role=”navigation”] a:hover {
color: #FFFFFF;
background-color:#003277; }
/*マウスを乗せたときに文字は白(#FFFFFF)マスの背景は紺色(#003277)になるように変更*/

こんな感じで、変更して現在のナビゲーションの状態になりました 分かり安くなったと思います

もっとずらずらと上から出てくるナビにしたいのだけど、やり方が分かりません 素人なので、これぐらいでOKでしょう!

大将に直接 問い合わせしたい方はこちらから

大将直電

川にいる時やハーモニカ吹いているときは出ません

LINEはお友達追加して、簡単なメッセージを入れて下さい

仕事中はLINE見ませんので、返信は遅いです

アイキャッチありません

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次