本日は、CSSをつかったメニューの作り方の追記です。HTMLおよび、CSSは今まで利用の物に追加する形で記述して構いません。
先日掲載した方法ですが、あのまま実際に使いますと、上下左右にマージンが入ってしまいうまくデザイン出来ないという状況になります。
今回の設定では、メニュー一つ一つの間には全く間隔を入れていません。
入れたい場合は、CSSを変更して対処するようにして下さいね。(変更の方法は、CSS部分に記述してあります。)
なお、HTML部分は、前回案内した物と同じです。変更はCSSのみになりますので、そちらだけ変更するように
して下さい。よろしくお願い致します～
ここからコピー部分です。
＊＊＊
DIVで囲ったglobal menuを、HTMLのはめたい部分にコピペして下さい。
前回使ったHTMLの
<div id="container">
</div>
この間に入れることが望ましいです。
＊＊＊コピー開始！(HTML)
<!-- Start header_mainmenu -->
<div id="header_mainmenu">
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li class="last">以下、好きなように・・・</li> <!-- 最後のメニューには必ずclass="last"を入れて下さい -->
</ul>
<!-- End header_mainmenu -->
</div>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊コピー開始！（CSS)
/* 横型メインメニュー設定はここから*/
div #header_mainmenu ul li{
width:100%;
display:inline;
text-align:left;
}
div#header_mainmenu ul{
margin: 0px;
padding: 0;
list-style-type:disc; /*リストの頭につく修飾。いらない場合はdisc を noneへ変更*/
}
div#header_mainmenu li{
margin-right:0px; /*右側に空間を空けたい場合は、ここの数値を変更すること。*/
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
以上、本日のテクニックでした＾＾