ホームページ制作

グローバルメニューバーをプルダウンメニューにする方法!

投稿日:

Pocket

ホームページのヘッダー部にあるメニューを増やすには!

ホームページを作る際に、関連サイトにリンクを貼りたいけど?

メニューバーに並べるには、あまりにも多すぎて?

でも見やすい所にリンクを貼りたい!

そんな事はありませんか?

そんな時は,

こちらのサイトの様に!!

メニューをプルダウン(マウスを置いたらズラズラっとメニュバーが出る)にする方法!が良いです。

その方法は、

 

下記をコピペして自分のサイト(html&CSSファイル)に貼り付けてください。

※< >は、全角で書いていますので半角へ変更して下さい。

【HTMLは下記をコピペ】

<ul id="menu">
<li><a href="URL">メニュー1</a>
<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>

※新しいウインドウで開かない場合は「target="_blank"」を消して下さい。
※リンク先・メニュー名はそれぞれ変更して下さい。
※項目を増やしたい場合は<li>~</li>をコピペして増やして下さい。</div>

 

【CSSは下記をコピペ】

#menu {
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%;」の所を変更して下さい。

-ホームページ制作
-,

Copyright© プライベートパソコン教室 , 2017 AllRights Reserved.