背景画像つかったグランドナビ、横幅変わる時に対応よくわからないので、background-colorを使ったシンプルなもので今後作る。
例 レスポンシブルwebデザイン まさはしＦＰ
エディタHTMLモードでチェック
●ＰＣ用のナビ
/* menu */
.menu_box {
width: 999px;
height: 30px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border-left: solid 1px #ffffff;
}
※css3でグラデーション機能
ul#menu {
width: 1000px;
list-style: none;
margin: 0px;
height: 30px;
vertical-align: top;
background: -webkit-gradient(linear, left top, left bottom, from(#ff1a70), color-stop(50%, #ff4d8f), to(#ff659e));
background: -webkit-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
background: -moz-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
background: -o-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
background: -ms-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
}
ul#menu .g-navi{list-style-type: none;
float: left}
ul#menu li {font-size:12px;}
ul#menu .g-navi a {display:block;
width: 123px;
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
border-right: solid 1px #ffffff;
}
ul#menu .g-navi a:hover {
/*background-color: #017acd*/
background: -webkit-gradient(linear, left top, left bottom, from(#ff88b5), to(#ffaccd));
background: -webkit-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -moz-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -o-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -ms-linear-gradient(#ff88b5 0%, #ffaccd 100%);
}
ＩＥ10以下で適用させる記述 エディタHTMLモード内にて記述チェック
ul#menu {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ff1a70′, endColorstr=’#ff4d8f’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ff1a70′, endColorstr=’#ff4d8f’)”}
ul#menu .g-navi a:hover {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ff88b5′, endColorstr=’#ffaccd’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ff88b5′, endColorstr=’#ffaccd’)”}
—-
●タブレット用のナビ
#navi_container {
background-image: url(../image/naviback.jpg);
background-repeat: repeat-x;
height: 30px;
clear: both;
}
#grand_navi {
height: 30px;
width: 100%;
text-align: left;
}
/* menu */
.menu_box {
width: 100%;
height: 30px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border-left: solid 1px #ffffff;
text-align: left;
}
ul#menu {
width: 100%;
list-style: none;
margin: 0px;
height: 30px;
vertical-align: top;
background: -webkit-gradient(linear, left top, left bottom, from(#ff1a70), color-stop(50%, #ff4d8f), to(#ff659e));
background: -webkit-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
background: -moz-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
background: -o-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
background: -ms-linear-gradient(#ff1a70 0%, #ff4d8f 50%, #ff659e 100%);
padding: 0px;
text-align: left; （左だ吏揃えになるように）
}
ul#menu .g-navi{list-style-type: none;
float: left}
ul#menu li {font-size:12px;}
ul#menu .g-navi a {
display: block;
width: 90px; （ナビの全幅に収まるようにピクセルで大きさ調節）
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
border-right: solid 1px #ffffff;
font-size: 10px;
}
ul#menu .g-navi a:hover {
/*background-color: #017acd*/
background: -webkit-gradient(linear, left top, left bottom, from(#ff88b5), to(#ffaccd));
background: -webkit-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -moz-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -o-linear-gradient(#ff88b5 0%, #ffaccd 100%);
background: -ms-linear-gradient(#ff88b5 0%, #ffaccd 100%);
}