スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > HTMLメニュー

HTMLメニュー

投稿日:2006年9月22日   レベル:初級    ソフトウェア:DreamWeaver



HTMLメニューこのチュートリアルを読めば、ロールオーバー効果を使った、素敵なメニューを作ることができます。

近頃の傾向としては、ウェブデザインはますますシンプルになり、凝ったグラフィックやフラッシュのサイトは減っていっています。

最初に、メニューのそれぞれの項目を普通の表で作成します。

<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF">Home</td> </tr> <tr> <td bgcolor="#FFFFFF">Images</td> </tr> <tr> <td bgcolor="#FFFFFF">Help</td> </tr> <tr> <td bgcolor="#FFFFFF">Contact</td> </tr> </table>

これで、リンクを格納するシンプルなボックスができました。これにマウスオーバー効果をつけていきます。それぞれのTDタグに、以下のようにマウスとの相互作用について振る舞いをブラウザに支持します。

<td bgcolor="#FFFFFF" onMouseOver="this.style.background ='#E8E8E8'" onMouseOut="this.style.background='#FFFFFF'">Home</td>

これで最初のセルについては完了です。最終的には全てのセルに記述していきます。このコードはマウスがセルに触れると、背景の色が変わるようになっています。そして、マウスが離れると、元の色に戻るといった具合です。リンクを作成します。

<td bgcolor="#FFFFFF" onMouseOver="this.style.background ='#E8E8E8'; this.style.cursor = 'hand'" onMouseOut="this.style.background='#F7F7F7'" onClick="parent.location='index.php'">Home</td>

ここで、2つのことをおこなっていきます。まず、セルをクリックした時、どこに移動するか。次に、マウスポインタをリンクに対して一般的な手に変えるようなコードの記述をおこなうと、次のようになります。

<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" onClick="parent.location='index.php'" onMouseOver="this.style.background ='#E8E8E8'; this.style.cursor = 'hand'">Home</td> </tr> <tr> <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" onClick="parent.location='images.php'" onMouseOver="this.style.background ='#E8E8E8'; this.style.cursor = 'hand'">Images</td> </tr> <tr> <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" onClick="parent.location='help.php'" onMouseOver="this.style.background ='#E8E8E8'; this.style.cursor = 'hand'">Help</td> </tr> <tr> <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" onClick="parent.location='contact.php'" onMouseOver="this.style.background ='#E8E8E8'; this.style.cursor = 'hand'">Contact</td> </tr> </table>


引用:Web Design Library著者:Clojita翻訳:atuk




スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング