マイクロソフトWEBサイトみたいなCSSメニューとphotoshopデータ

自分の好きなサイトMicrosoft Windows ホームページのメニューを真似して作ってみました。CSS難しいですね。スマートじゃないですが、形になっていると思うのでデータ共に公開します。

microsoftWEBサイトみたいなメニュー

CSSでWindowsVista風のナビゲーションバーを作成するサンプル:phpspot開発日誌と『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方*ホームページを作る人のネタ帳のエントリーにつられてエントリーアップすることにしました。

こんな感じのメニューです。マイクロソフトのWEBサイトみないなMENU（別窓表示）

以下XHTMLとCSSとサンプルページと同じファイルとメニュー元画像Photoshopデータおいておきます。よろしかったら使ってみてください。
※尚、データを別々に作成したため、hoverのマージンが異なりますので、若干CSSのマージンが違います。

ソース

画像はすべて透過PNGを使用しています。

#navi divのwidthで任意のメニュー幅を設定できます。後は、すべてテキストの長さでマージンが取られています。

上下のメニューのhoverのサイズが異なるため#navi ulのマージンの取り方を調節する必要があります。データをあわせればマージンを変える必要なはないです。

ご自分で適宜直して使ってみてください。あとcurrentの設定とか。

/* navigation black */
#navi{
	margin:0 20px;
	background:transparent url(../images/navibg_01.png) top left no-repeat;
	padding:0 0 0 20px;
	height:36px;
	font-size:1em;
	text-transform:uppercase;
	}
#navi div{
	margin:0;
	width: 100%;
	background:transparent url(../images/navibg_02.png) top right no-repeat;
	height:36px;
	}
#navi ul{
	margin:2px 0 0 0;
	padding:0;
	list-style-type:none;
	width:auto;
	float:left;
	}
#navi ul li{
	display:block;
	float:left;
	margin:0;
	padding:0 5px;
	background:transparent url(../images/naviline.png) no-repeat center right;
	}

#navi ul li a{
	display:block;
	float:left;
	color:#EAF3F8;
	text-decoration:none;
	padding:0 0 0 20px;
	height:33px;
	}
#navi ul li a span{
	padding:10px 20px 0 0px;
	height:33px;
	float:left;
	}
#navi ul li a:hover{
	color:#fff;
	background:transparent url(../images/navihover_01.png) no-repeat top left;
	}
#navi ul li a:hover span{
	display:block;
	background:transparent url(../images/navihover_02.png) no-repeat top right;
	}
#navi ul li a.current,#navi ul li a.current:hover{
	color:#fff;
	background:transparent url(../images/navihover_01.png) no-repeat top left;
	}
#navi ul li a.current span{
	display:block;
	padding:10px 30px 0 10px;
	background:transparent url(../images/navihover_02.png) no-repeat top right;
	height:33px;
	}

透過PNG

ユンサンの／???／YungSang's: 透過PNG と IE と IE7　まとめこちらより透過PNG　JSファイルをダウンロードして同じフォルダにおいてください。詳しくはページ参照。

データ

色を変えてみてさまざまなメニューを作ってみてください（調整レイヤー作っておきました)。本当は、アンチエイリアスみたいな話（自分でそんな感じに仕上げる）までしようかとおもいましたが、眠いのでまた今度。この手の画像で1ピクセルラインがどうしてもぼやけてしまう時があるんです。そんな時に使っている方法なんかもまた、エントリーできたらしてみます。今回は、境界線を別レイヤーにして作っています。（昔の方法）

サンプルページデータ→ファイルをダウンロード

元画像photoshopデータ→ファイルをダウンロード

お昼過ぎに思い立って、エントリー書いてっと、本当は寝る時間なのに。今日は寝坊しそうな予感。（14：40）

コメントする

マイクロソフトWEBサイトみたいなCSSメニューとphotoshopデータ

ソース

透過PNG

データ

カテゴリ:

タグ:

トラックバック(0)

コメントする

カテゴリ

月別アーカイブ

ウェブページ

検索

最近のブログ記事

アイテム

このブログ記事について

マイクロソフトWEBサイトみたいなCSSメニューとphotoshopデータ

ソース

透過PNG

データ

カテゴリ:

タグ:

トラックバック(0)

コメントする

カテゴリ

月別 アーカイブ

ウェブページ

検索

最近のブログ記事

アイテム

タグクラウド

このブログ記事について

月別アーカイブ