◆ヘッダー下にメニューバーを設置する

こんにちは、カスタマイズと復興支援で頑張るたっくんです。

今日は、ヘッダー下に、

メニューバー（グローバルメニュー）を設置してみました。

すでに設置している方もいらっしゃるかと思います。

とても目立つ場所なので、

読んでほしい記事へのリンクを張りつけることによって、

アクセスアップにもつながるかもしれませんね。

背景画像を使用したり、いろいろ方法はありますが、

今回は、文字と背景色のみのシンプルなデザインです。

フリースペースの編集があったりと、作業量若干多めですが、

ぜひチャレンジしてみてください。

注：今回の編集は、新旧どちらのデザインにも対応しています。

フリースペースの編集

以下のHTMLタグをフリースペースに追加してみてください。

<div id="headerMenu"><ul class="menu"><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>

フリースペースエリアにメニューが表示されればOKです。

最後に保存するのを忘れないようにしてくださいね。

CSSの編集

以下のCSSを追加してみてください。

こちら↓は、変更しないでそのままコピペしてください。

/*この部分は変更しない*/
#wrap,.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}

こちら↓は、お好みにより適宜変更してください。

/*位置・サイズ調整*/
#wrap,.skinContentsArea{
padding-top:40px; /*メニュー設置用スペース*/
}
#headerMenu{
top:0px; /*上下位置調整*/
left:0px; /*左右位置調整*/
width:980px; /*メニュー全体の幅*/
}
#headerMenu ul.menu li a{
width:196px; /*ボタンの幅*/
line-height:30px; /*ボタンの高さ*/
font-size:14px; /*ボタンの文字サイズ*/
}

/*色・文字装飾・背景など*/
#headerMenu ul.menu li a{ /*通常時*/
color:#ffffff; /*文字色*/
font-weight:normal; /*太字*/
text-decoration:none; /*下線*/
background-color:#028760; /*背景色*/
background-image:url(); /*背景画像*/
background-repeat:repeat; /*背景画像繰り返し*/
}
#headerMenu ul.menu li a:hover{ /*マウスオーバー時*/
color:#333333; /*文字色*/
font-weight:bold; /*太字*/
text-decoration:underline; /*下線*/
background-color:#e0ebaf; /*背景色*/
background-image:url(); /*背景画像*/
background-repeat:repeat; /*背景画像繰り返し*/
}

なお、今回の記事は、

いつもお世話になっています、わざめーばさんの、

こちらの記事を参考にしました。

ありがとうございます。

あなたも、ぜひ参考にしてみてください。

⇒ヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法

@takumi_heigenをフォロー

---