プライベートパソコン教室

パソコン操作が苦手な社長さんの強い味方、パソコンの楽しさを伝えながら、一緒に学んで行きます。
検索エンジンに強いホームページ制作を起業家と共に制作していきます。
自分自身のビジネスで成功したいと願っている全ての人へチャンスを提供!!


テーマ:
グローバルメニューバーに6個以上リンクする方法がありますか?


プライベートパソコン教室
プライベートWEBコーチの中城です!






勝って涙! 負けて涙!・・・・感動をありがとう!


世界中の多くの人々を感動の渦に巻き込んだ、リオオリンピックも閉幕しました。


オリンピックで競技終了後プロポーズするといった、粋な事をする人も居ましたね!


生涯忘れる事の出来ない思い出でしょうね!!


今回の日本の躍進は各競技で素晴らしいでしたね!


この大会のために日々の苦しい練習に耐えて来た成果が実った素晴らしい大会でした!




あなたが選んだ、今大会の一押し! はどの競技でしょうか?


私はどれもこれも素晴らしいけど・・・・・ひとつ!と言われれば・・・・・


4X100mリレーの銀メダルかな?100m9秒台の選手は居ないのに、4人とも9秒台と言う国を破っての銀メダルは素晴らしいです。




4年後の東京オリンピックが非常に楽しみです。





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


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


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


とお考えならば、



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



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




下記をコピペして自分のサイト(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</a>
<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</a>
<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>をコピペして増やして下さい。





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






「教えて〜!パソコン」


LINE@で!「教えて〜パソコン」会員募集中

友だち追加数



■メールマガジン■
WEBがあなたの秘書になる!HP制作・集客は「城ネットサービス」にお任せ!

1.パソコンを使いこなしたい人が読むメルマガ


■Jonet Service提供のサービス■

AD
いいね!した人  |  コメント(0)  |  リブログ(0)

プライベートWEBコーチさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。