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)になるように変更*/
こんな感じで、変更して現在のナビゲーションの状態になりました 分かり安くなったと思います
もっとずらずらと上から出てくるナビにしたいのだけど、やり方が分かりません 素人なので、これぐらいでＯＫでしょう！
コメント