CSS３のグラデーションを使ってナビボタン作成(不完全)

僕はアメブロのCSSセレクタをよく知らないので、

今回『アメブロ向上企画書』さんの記事を

かなり引用させてもらってます。

是非そちらも参考にされて下さい。


----- 以下改造記録 -----

まずナビゲーションする項目を決めてリストにします。

僕はＴＯＰ、なう、ぺた、読者、メッセージ、にしました。


トップ 　　http://ameblo.jp/ユーザーID/
なう 　　　http://now.ameba.jp/ユーザーID/
ペタ 　　　http://peta.ameba.jp/p/addPeta.do?targetAmebaId =ユーザーID
読者 　　　http://blog.ameba.jp/reader.do?bnm=ユーザーID
メッセージ http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=ユーザーID


と、まとめたら

フリースペースにタグでメニューを作ります

<div id="topmenu">
<ul>
<li><a href="リンク先のURL/">トップ</a></li>
<li><a href="リンク先のURL">なう</a></li>
<li><a href="リンク先のURL">ぺた</a></li>
<li><a href="リンク先のURL">読者</a></li>
<li><a href="リンク先のURL">メッセージ</a></li>
</ul>
</div>

そのままだとエラーになるようなので

<div id="topmenu"><ul><li><a href="リンク先のURL/">トップ</a></li><li><a href="リンク先のURL">なう</a></li><li><a href="リンク先のURL">ぺた</a></li><li><a href="リンク先のURL">読者</a></li><li><a href="リンク先のURL">メッセージ</a></li></ul></div>

という様に改行を消して一行の文にします

これを保存してＣＳＳに移ります



/*ナビゲーションメニュー*/

#topmenu {
width: 800px;/*スキンの幅*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
background-color:#c4c4c4;/*背景色*/
line-height:2;/*行の高さ*/
display: block;
z-index:100;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 158px;/*ボタン1つの幅Ｂ*/
margin:0;
background:
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
margin: 0;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
background:
}



を分かりやすい様一番下に書き込んだら

青地のbackgroundにグラデーションの背景を

打ち込んでいきます



#topmenu li {
width: 158px;/*1つの幅Ｂ*/
margin: 0 0;/*メニューのスキマＣ*/
border-left:1px solid #c3c3c3;/*ボタンの左の仕切り*/
border-right:1px solid #c3c3c3;/*ボタンの右の仕切り*/
border-top: 1px solid #e8e8e8;/*ボタンの上の仕切り*/
background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#e3e3e3));/*Safari Chrome用グラデーション*/
background: -moz-linear-gradient(top, #c5c5c5, #e3e3e3);/*Firefox用グラデーション*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5c5c5', endColorstr='#e3e3e3');/*InternetExplorer用グラデーション*/
text-shadow: 0 1px 1px rgba(0,0,0,.3);/*文字の影（ＩＥ以外に適用）*/
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}

と、３つのブラウザに対応しながら

ここまでは出来たのですが、、、


この後a:hoverの背景にグラデーションをかけると

ChromeやFirefoxは良いんですがＩＥでチラつきが出てしまって、、、

どうやっても僕の力では直せなかったので


これ↓



hover後は画像を差し替える事に妥協しました。。。


#topmenu li a:hover {
color: #ca0000;
background-image:url(画像ＵＲＬ);
}



最後に、自分の環境に合わせて配置を


#wrap{
width:800px;
margin:40px 0 0 0;
}

で、ヘッダー下にスペース作って


#topmenu {
width: 800px;/*スキンの幅Ａ*/
height: 38px;
position: absolute;
margin:-40px 0 0 0;
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
background-color:#c4c4c4;
line-height:2.5;
display: block;
z-index:100;
overflow:hidden;
]


出来上がり。


細かい説明とか端折ってる部分は

自分用メモって事で勘弁してくださいm(_ _)m




にほんブログ村