ホームページのヘッダー部にあるメニューを増やすには!
ホームページを作る際に、関連サイトにリンクを貼りたいけど?
メニューバーに並べるには、あまりにも多すぎて?
でも見やすい所にリンクを貼りたい!
そんな事はありませんか?
そんな時は,
メニューをプルダウン(マウスを置いたらズラズラっとメニュバーが出る)にする方法!が良いです。
その方法は、
下記をコピペして自分のサイト(html&CSSファイル)に貼り付けてください。
※< >は、全角で書いていますので半角へ変更して下さい。
【HTMLは下記をコピペ】
<ul>
<li><a href=”URL” target=”_blank”>メニュー1-1</a></li>
<li><a href=”URL” target=”_blank”>メニュー1-2</a></li>
<li><a href=”URL” target=”_blank”>メニュー1-3</a></li>
</ul>
</li>
<li><a href=”URL”>メニュー2</a>
<ul>
<li><a href=”URL” target=”_blank”>メニュー2-1</a></li>
<li><a href=”URL” target=”_blank”>メニュー2-2</a></li>
<li><a href=”URL” target=”_blank”>メニュー2-3</a></li>
</ul>
</li>
<li><a href=”URL”>メニュー3</a>
<ul>
<li><a href=”URL” target=”_blank”>メニュー3-1</a></li>
<li><a href=”URL” target=”_blank”>メニュー3-2</a></li>
<li><a href=”URL” target=”_blank”>メニュー3-3</a></li>
</ul>
</li>
<li><a href=”URL”>メニュー4
<ul>
<li><a href=”URL” target=”_blank”>メニュー4-1</a></li>
<li><a href=”URL” target=”_blank”>メニュー4-2</a></li>
<li><a href=”URL” target=”_blank”>メニュー4-3</a></li>
</ul>
</li>
<li><a href=”URL”>メニュー5
<ul>
<li><a href=”URL” target=”_blank”>メニュー5-1</a></li>
<li><a href=”URL” target=”_blank”>メニュー5-2</a></li>
<li><a href=”URL” target=”_blank”>メニュー5-3</a></li>
</ul>
</li>
<li><a href=”URL”>メニュー6</a>
<ul>
<li><a href=”URL” target=”_blank”>メニュー6-1</a></li>
<li><a href=”URL” target=”_blank”>メニュー6-2</a></li>
<li><a href=”URL” target=”_blank”>メニュー6-3</a></li>
</ul>
</li>
</ul>
</div>
※新しいウインドウで開かない場合は「target=”_blank”」を消して下さい。
※リンク先・メニュー名はそれぞれ変更して下さい。
※項目を増やしたい場合は<li>~</li>をコピペして増やして下さい。
【CSSは下記をコピペ】
z-index:10;
list-style-type: none;
width: 850px;
height: 40px;
margin: 5px auto 5px;
padding: 0;
border-bottom: 3px solid #ddd;
border-radius: 3px 3px 0 0;
}
#menu li {
z-index:10;
position: relative;
width: 16.666%;
float: left;
margin: 0;
padding: 0;
text-align: center;
font-size:0.75em;
color:#333;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#menu li a {
z-index:10;
display: block;
margin: 0;
padding: 15px 0 10px;
color: #0000ff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
#menu li a:hover {
z-index:10;
background: url(“../images/bg_list_on1.gif”) 0 50% repeat-x;
color: #ffffff;
}
#menu > li:hover > a{
border-radius: 3px 3px 0 0;
}
※下に画像等が有り重なる場合、最前面に出したい場合は「z-index:10;」を入れて下さい。省くと背面へ入り込みます。
※横幅850px・横に6個で設定しています。増減する場合は「width: 16.666%;」の所を変更して下さい。